1/*! 2Title: TITLE 3Author: Nick Salloum 4Author URI: http://callmenick.com/ 5Description: My theme 6Version: 0.1.0 7*/ 8 9.mm-menu-bg { 10 position: fixed; 11 background-color: __background__; 12 bottom: 7px; 13 left: 12px; 14 width: 44px; 15 height: 44px; 16 border-radius: 1rem; 17} 18 19.mm-menu-toggle { 20 position: fixed; 21 /* top: 12px; 22 left: 12px; */ 23 left: 20px; 24 bottom: 20px; 25 z-index: 20; 26 width: 28px; 27 height: 18px; 28 /* background: -webkit-linear-gradient(90deg, rgba(33, 33, 33, 0), rgba(33, 33, 33, 0) 7px, #fff 7px, #fff 11px, rgba(33, 33, 33, 0) 11px, rgba(33, 33, 33, 0) 18px); */ 29 /* background: linear-gradient(0deg, rgba(33, 33, 33, 0), rgba(33, 33, 33, 0) 7px, #fff 7px, #fff 11px, rgba(33, 33, 33, 0) 11px, rgba(33, 33, 33, 0) 18px); */ 30 background: -webkit-linear-gradient(90deg, rgba(33, 33, 33, 0), rgba(33, 33, 33, 0) 7px, __theme_color__ 7px, __theme_color__ 11px, rgba(33, 33, 33, 0) 11px, rgba(33, 33, 33, 0) 18px); 31 background: linear-gradient(0deg, rgba(33, 33, 33, 0), rgba(33, 33, 33, 0) 7px, __theme_color__ 7px, __theme_color__ 11px, rgba(33, 33, 33, 0) 11px, rgba(33, 33, 33, 0) 18px); 32 font-size: 0; 33 text-indent: -9999px; 34 border: none!important; 35 box-shadow: none!important; 36} 37 38.mm-menu-toggle::after, 39.mm-menu-toggle::before { 40 display: block; 41 position: absolute; 42 left: 0; 43 width: 100%; 44 height: 4px; 45 background-color: __theme_color__; 46 content: "" 47} 48 49.mm-menu-toggle::before { 50 top: 0; 51 -webkit-transform-origin: bottom left; 52 -ms-transform-origin: bottom left; 53 transform-origin: bottom left 54} 55 56.mm-menu-toggle::after { 57 bottom: 0; 58 -webkit-transform-origin: top left; 59 -ms-transform-origin: top left; 60 transform-origin: top left 61} 62 63.mm-menu-toggle, 64.mm-menu-toggle::after, 65.mm-menu-toggle::before { 66 -webkit-transition: all .5s; 67 transition: all .5s 68} 69 70.mm-menu-toggle.active { 71 -webkit-transform: rotate(360deg); 72 -ms-transform: rotate(360deg); 73 transform: rotate(360deg) 74} 75 76.mm-menu-toggle.active::before { 77 width: 75%; 78 -webkit-transform: translateY(7px) rotate(-45deg); 79 -ms-transform: translateY(7px) rotate(-45deg); 80 transform: translateY(7px) rotate(-45deg) 81} 82 83.mm-menu-toggle.active::after { 84 width: 75%; 85 -webkit-transform: translateY(-7px) rotate(45deg); 86 -ms-transform: translateY(-7px) rotate(45deg); 87 transform: translateY(-7px) rotate(45deg) 88} 89 90.mm-menu { 91 position: fixed; 92 top: 0; 93 left: 0; 94 z-index: 10; 95 background-color: __background__; 96 width: 100%; 97 height: 100%; 98 overflow-y: auto; 99 box-shadow: 0; 100 -webkit-transform: translateX(-100%); 101 -ms-transform: translateX(-100%); 102 transform: translateX(-100%); 103 -webkit-transition: -webkit-transform .5s, box-shadow .5s; 104 transition: transform .5s, box-shadow .5s 105} 106 107 108/* Hide scrollbar for Chrome, Safari and Opera */ 109 110.mm-menu::-webkit-scrollbar { 111 display: none; 112} 113 114 115/* Hide scrollbar for IE, Edge and Firefox */ 116 117.mm-menu { 118 -ms-overflow-style: none; 119 /* IE and Edge */ 120 scrollbar-width: none; 121 /* Firefox */ 122} 123 124.mm-menu.active { 125 box-shadow: 0 2px 8px rgba(0, 0, 0, .2); 126 -webkit-transform: translateX(0); 127 -ms-transform: translateX(0); 128 transform: translateX(0) 129} 130 131@media all and (min-width:300px) { 132 .mm-menu { 133 width: 300px; 134 -webkit-transform: translateX(-300px); 135 -ms-transform: translateX(-300px); 136 transform: translateX(-300px) 137 } 138} 139 140.mm-menu__header { 141 position: relative; 142 width: 100%; 143 /* height: 188px; */ 144 /* background-color: #CDDC39 */ 145 margin-bottom: 0.5rem; 146} 147 148.mm-menu__title { 149 /* position: absolute; */ 150 bottom: 12px; 151 left: 12px; 152 margin: 0; 153 padding: 0; 154 color: #fff; 155 font-size: 22px 156} 157 158.mm-menu__items { 159 list-style: none; 160 margin: 0; 161 padding: 0 162} 163 164.mm-menu__item { 165 display: block; 166 width: 100%; 167 opacity: 0; 168 -webkit-transform: translateX(-50%); 169 -ms-transform: translateX(-50%); 170 transform: translateX(-50%) 171} 172 173.mm-menu__item.in-view { 174 opacity: 1; 175 -webkit-transform: translateX(0); 176 -ms-transform: translateX(0); 177 transform: translateX(0) 178} 179 180.mm-menu__item.item-1 { 181 -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s; 182 transition: opacity .5s .1s, transform .5s .1s 183} 184 185.mm-menu__item.item-2 { 186 -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s; 187 transition: opacity .5s .2s, transform .5s .2s 188} 189 190.mm-menu__item.item-3 { 191 -webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s; 192 transition: opacity .5s .3s, transform .5s .3s 193} 194 195.mm-menu__item.item-4 { 196 -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s; 197 transition: opacity .5s .4s, transform .5s .4s 198} 199 200.mm-menu__item.item-5 { 201 -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s; 202 transition: opacity .5s .5s, transform .5s .5s 203} 204 205.mm-menu__item.item-6 { 206 -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s; 207 transition: opacity .5s .6s, transform .5s .6s 208} 209 210.mm-menu__item.item-7 { 211 -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s; 212 transition: opacity .5s .7s, transform .5s .7s 213} 214 215.mm-menu__item.item-8 { 216 -webkit-transition: opacity .5s .8s, -webkit-transform .5s .8s; 217 transition: opacity .5s .8s, transform .5s .8s 218} 219 220.mm-menu__item.item-9 { 221 -webkit-transition: opacity .5s .9s, -webkit-transform .5s .9s; 222 transition: opacity .5s .9s, transform .5s .9s 223} 224 225.mm-menu__item.item-10 { 226 -webkit-transition: opacity .5s 1s, -webkit-transform .5s 1s; 227 transition: opacity .5s 1s, transform .5s 1s 228} 229 230.mm-menu__item.item-11 { 231 -webkit-transition: opacity .5s 1.1s, -webkit-transform .5s 1.1s; 232 transition: opacity .5s 1.1s, transform .5s 1.1s 233} 234 235.mm-menu__item.item-12 { 236 -webkit-transition: opacity .5s 1.2s, -webkit-transform .5s 1.2s; 237 transition: opacity .5s 1.2s, transform .5s 1.2s 238} 239 240.mm-menu__item.item-13 { 241 -webkit-transition: opacity .5s 1.3s, -webkit-transform .5s 1.3s; 242 transition: opacity .5s 1.3s, transform .5s 1.3s 243} 244 245.mm-menu__item.item-14 { 246 -webkit-transition: opacity .5s 1.4s, -webkit-transform .5s 1.4s; 247 transition: opacity .5s 1.4s, transform .5s 1.4s 248} 249 250.mm-menu__item.item-15 { 251 -webkit-transition: opacity .5s 1.5s, -webkit-transform .5s 1.5s; 252 transition: opacity .5s 1.5s, transform .5s 1.5s 253} 254 255.mm-menu__item.item-16 { 256 -webkit-transition: opacity .5s 1.6s, -webkit-transform .5s 1.6s; 257 transition: opacity .5s 1.6s, transform .5s 1.6s 258} 259 260.mm-menu__item.item-17 { 261 -webkit-transition: opacity .5s 1.7s, -webkit-transform .5s 1.7s; 262 transition: opacity .5s 1.7s, transform .5s 1.7s 263} 264 265.mm-menu__item.item-18 { 266 -webkit-transition: opacity .5s 1.8s, -webkit-transform .5s 1.8s; 267 transition: opacity .5s 1.8s, transform .5s 1.8s 268} 269 270.mm-menu__item.item-19 { 271 -webkit-transition: opacity .5s 1.9s, -webkit-transform .5s 1.9s; 272 transition: opacity .5s 1.9s, transform .5s 1.9s 273} 274 275.mm-menu__item.item-20 { 276 -webkit-transition: opacity .5s 2s, -webkit-transform .5s 2s; 277 transition: opacity .5s 2s, transform .5s 2s 278} 279 280.mm-menu__link { 281 display: block; 282 position: relative; 283 overflow: hidden; 284 margin: 4px 0; 285 padding: 12px; 286 color: #727272; 287 font-size: 16px; 288 text-decoration: none; 289 -webkit-transition: background .5s, color .5s; 290 transition: background .5s, color .5s 291} 292 293.mm-menu__link-text { 294 position: relative; 295 z-index: 2 296} 297 298.mm-menu__link--touch-effect { 299 display: block; 300 position: absolute; 301 z-index: 1; 302 width: 0; 303 height: 0; 304 border-radius: 100%; 305 background-color: #B6B6B6; 306 -webkit-transform: scale(0); 307 -ms-transform: scale(0); 308 transform: scale(0); 309 -webkit-transform-origin: 50% 50%; 310 -ms-transform-origin: 50% 50%; 311 transform-origin: 50% 50% 312} 313 314.mm-menu__link--touch-effect.animating { 315 -webkit-transform: scale(1); 316 -ms-transform: scale(1); 317 transform: scale(1); 318 -webkit-transition: -webkit-transform .5s; 319 transition: transform .5s 320} 321 322.mm-menu-mask { 323 display: block; 324 position: fixed; 325 top: 0; 326 left: 0; 327 z-index: 8; 328 width: 100%; 329 height: 100%; 330 background-color: rgba(0, 0, 0, .8); 331 visibility: hidden; 332 opacity: 0; 333 -webkit-transition: opacity .5s, visibility .5s; 334 transition: opacity .5s, visibility .5s 335} 336 337.mm-menu-mask.active { 338 visibility: visible; 339 opacity: 1 340} 341 342.mm-menu { 343 width: 256px; 344}