├── .gitignore ├── Gruntfile.js ├── README.md ├── _sass ├── config.rb └── sass │ ├── base │ ├── _base.scss │ └── _reset.scss │ ├── config │ ├── _mixins.scss │ └── _variables.scss │ ├── layouts │ └── _primary.scss │ ├── modules │ ├── _fusionad.scss │ ├── _icons.scss │ └── _menu.scss │ └── style.scss ├── css ├── style.css └── style.min.css ├── fonts ├── Material-Design-Iconic-Font.eot ├── Material-Design-Iconic-Font.svg ├── Material-Design-Iconic-Font.ttf └── Material-Design-Iconic-Font.woff ├── img ├── material-menu-featured.jpg └── mm-header.jpg ├── index.html ├── js ├── development │ └── materialMenu.js ├── external │ ├── fusionAd.js │ └── githubIcons.js └── production │ ├── materialMenu.js │ └── materialMenu.min.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | _sass/.sass-cache/ 2 | node_modules/ -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | 3 | // Project and task configuration. 4 | grunt.initConfig({ 5 | pkg: grunt.file.readJSON('package.json'), 6 | concat: { 7 | options: { 8 | separator: ';', 9 | }, 10 | dist: { 11 | src: ['js/development/materialMenu.js'], 12 | dest: 'js/production/materialMenu.js', 13 | }, 14 | }, 15 | uglify: { 16 | my_target: { 17 | files: { 18 | 'js/production/materialMenu.min.js': ['js/production/materialMenu.js'] 19 | } 20 | } 21 | }, 22 | cssmin: { 23 | target: { 24 | files: { 25 | 'css/style.min.css': ['css/style.css'] 26 | } 27 | } 28 | }, 29 | watch: { 30 | scripts: { 31 | files: ['css/style.css'], 32 | tasks: ['cssmin'] 33 | } 34 | } 35 | }); 36 | 37 | // Load plugins. 38 | grunt.loadNpmTasks('grunt-contrib-concat'); 39 | grunt.loadNpmTasks('grunt-contrib-uglify'); 40 | grunt.loadNpmTasks('grunt-contrib-cssmin'); 41 | grunt.loadNpmTasks('grunt-contrib-watch'); 42 | 43 | // Default tasks. 44 | grunt.registerTask('default', ['concat','uglify','cssmin']); 45 | 46 | }; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Material Design Off Canvas Menu 2 | 3 | This project was build using front end technologies, HTML5, CSS3, and JavaScript, to generate an off-canvas menu based on material design principles. It contains four main features: 4 | 5 | 1. Animated toggle button 6 | 2. Animated off canvas menu 7 | 3. Animated Menu Items 8 | 4. Touch/click ripple effect 9 | 10 | [View the live demo here](http://callmenick.com/_development/material-menu/) 11 | 12 | ## 1 - Animated Toggle Button 13 | 14 | The animated toggle button is a neat button created with pure CSS. It's a hamburger icon by default, and animates into an arrow (indicating a close button) when the menu is active/open. 15 | 16 | ## 2 - Animated Off Canvas Menu 17 | 18 | The menu is initially hidden from view, and when the toggle switch is hit, it animates into view. It bumps the main content to the side, and also adds a mask over it. Clicking the mask or the toggle switch again closes the menu, animating it out of view. 19 | 20 | ## 3 - Animated Menu Items 21 | 22 | While the menu slides into view, each item in the menu animates into view with a slight delay. This adds a little layer of neat animation to the menu. 23 | 24 | ## 4 - Touch/Click Ripple Effect 25 | 26 | The touch/click ripple effect is an effect that creates a little animation, mimicking a ripple, expanding outwards from the point of contact with the user. This effect is mentioned and displayed quite a bit in the material design spec, and I replicated it with CSS and JavaScript. 27 | 28 | ## Support 29 | 30 | This project makes use of a few modern techniques: 31 | 32 | * Transitions, transforms, and animations 33 | * Transition events 34 | * The `classList` JavaScript method to add, remove, and check classes. 35 | 36 | If you want full browser support, you're going to have to implement the necessary fallbacks and polyfills. 37 | 38 | ## Tests 39 | 40 | This project was tested in the following browsers: 41 | 42 | * Chrome 39 43 | * Safari 8 44 | * Firefox 34 45 | 46 | Anyone else willing to run tests in other browsers, please let me know the results! Any issues, please file them accordingly. 47 | 48 | ## License 49 | 50 | Licensed under the MIT license, http://www.opensource.org/licenses/mit-license.php 51 | 52 | Copyright 2014, Call Me Nick 53 | 54 | http://callmenick.com 55 | 56 | ## Live Demo 57 | 58 | [View the live demo here](http://callmenick.com/_development/material-menu/). -------------------------------------------------------------------------------- /_sass/config.rb: -------------------------------------------------------------------------------- 1 | # syntax 2 | preferred_syntax = :scss 3 | 4 | # paths 5 | http_path = "/" 6 | css_dir = "../css" 7 | images_dir = "../img" 8 | javascripts_dir = "../js" 9 | sass_dir = "./sass" 10 | 11 | # style 12 | line_comments = false 13 | output_style = :expanded 14 | 15 | # autoprefixer 16 | require 'autoprefixer-rails' 17 | on_stylesheet_saved do |file| 18 | css = File.read(file) 19 | File.open(file, 'w') do |io| 20 | io << AutoprefixerRails.process(css) 21 | end 22 | end -------------------------------------------------------------------------------- /_sass/sass/base/_base.scss: -------------------------------------------------------------------------------- 1 | /* ============================================================================= 2 | HTML & BODY 3 | ============================================================================= */ 4 | 5 | body { 6 | color: $color--text-secondary; 7 | background-color: #fff; 8 | font-family: $font-family--primary; 9 | font-size: $font-size--small; 10 | font-weight: 300; 11 | line-height: $line-height--medium; 12 | } 13 | 14 | body.mm-menu-open { 15 | overflow: hidden; 16 | } 17 | 18 | /* ============================================================================= 19 | HEADINGS 20 | ============================================================================= */ 21 | 22 | h1, 23 | h2, 24 | h3, 25 | h4, 26 | h5, 27 | h6 { 28 | margin-bottom: 22px; 29 | color: $color--text-primary; 30 | line-height: $line-height--small; 31 | } 32 | 33 | h1 { 34 | font-size: $font-size--large; 35 | } 36 | 37 | h2 { 38 | font-size: $font-size--medium; 39 | } 40 | 41 | /* ============================================================================= 42 | TEXT 43 | ============================================================================= */ 44 | 45 | p { 46 | margin-bottom: 22px; 47 | } 48 | 49 | p:last-child { 50 | margin-bottom: 0; 51 | } 52 | 53 | a { 54 | color: $color--accent; 55 | text-decoration: none; 56 | } -------------------------------------------------------------------------------- /_sass/sass/base/_reset.scss: -------------------------------------------------------------------------------- 1 | /* ============================================================================= 2 | RESET 3 | ============================================================================= */ 4 | 5 | html, 6 | body, 7 | div, 8 | span, 9 | h1, 10 | h2, 11 | h3, 12 | h4, 13 | h5, 14 | h6, 15 | p, 16 | a, 17 | em, 18 | img, 19 | small, 20 | strong, 21 | ol, 22 | ul, 23 | li, 24 | article, 25 | aside, 26 | figure, 27 | figcaption, 28 | footer, 29 | header, 30 | nav, 31 | section { 32 | margin: 0; 33 | padding: 0; 34 | border: 0; 35 | font-size: 100%; 36 | font: inherit; 37 | vertical-align: baseline; 38 | } 39 | 40 | article, 41 | aside, 42 | figcaption, 43 | figure, 44 | footer, 45 | header, 46 | main, 47 | nav, 48 | section { 49 | display: block; 50 | } 51 | 52 | ol, 53 | ul { 54 | list-style: none; 55 | margin: 0; 56 | padding: 0; 57 | } 58 | 59 | /* ============================================================================= 60 | BUTTON RESETS 61 | ============================================================================= */ 62 | 63 | button { 64 | margin: 0; 65 | padding: 0; 66 | color: inherit; 67 | font-family: inherit; 68 | font-size: inherit; 69 | background: none; 70 | border: none; 71 | border-radius: none; 72 | box-shadow: none; 73 | -webkit-appearance: none; 74 | -moz-appearance: none; 75 | appearance: none; 76 | outline: none; 77 | cursor: pointer; 78 | } 79 | 80 | /* ============================================================================= 81 | BOX SIZING AND CLEARFIX 82 | ============================================================================= */ 83 | 84 | *, 85 | *::before, 86 | *::after { 87 | box-sizing: border-box; 88 | } 89 | 90 | .clearfix::after { 91 | content: ""; 92 | display: table; 93 | clear: both; 94 | } -------------------------------------------------------------------------------- /_sass/sass/config/_mixins.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callmenick/Material-Menu/5e8ce702f7d6068bafa5c756a3ec67603db54637/_sass/sass/config/_mixins.scss -------------------------------------------------------------------------------- /_sass/sass/config/_variables.scss: -------------------------------------------------------------------------------- 1 | // ============================================================================= 2 | // RATIOS 3 | // ============================================================================= 4 | 5 | // ============================================================================= 6 | // COLOURS 7 | // ============================================================================= 8 | 9 | $color--primary-dark: #7B1FA2; 10 | $color--primary: #9C27B0; 11 | $color--primary-light: #E1BEE7; 12 | 13 | $color--text-primary: #212121; // also for icons 14 | $color--text-secondary: #727272; 15 | $color--divider: #B6B6B6; 16 | 17 | $color--accent: #CDDC39; 18 | 19 | // ============================================================================= 20 | // FONTS 21 | // ============================================================================= 22 | 23 | $font-family--primary: "Roboto", sans-serif; 24 | 25 | $font-size--small: 16px; 26 | $font-size--medium: 22px; 27 | $font-size--large: 36px; 28 | 29 | $line-height--small: 1; 30 | $line-height--medium: 1.6; -------------------------------------------------------------------------------- /_sass/sass/layouts/_primary.scss: -------------------------------------------------------------------------------- 1 | /* ============================================================================= 2 | PRIMARY LAYOUT 3 | ============================================================================= */ 4 | 5 | .wrapper { 6 | z-index: 5; 7 | transition: transform 0.5s; 8 | } 9 | 10 | .wrapper.mm-menu-open { 11 | transform: translateX(300px); 12 | } 13 | 14 | .container { 15 | padding: 0 72px; 16 | } 17 | 18 | main { 19 | padding: 36px 0; 20 | } 21 | 22 | section { 23 | margin-bottom: 36px; 24 | } 25 | 26 | /* ============================================================================= 27 | HEADER 28 | ============================================================================= */ 29 | 30 | .header { 31 | padding: 24px 0; 32 | text-align: center; 33 | } 34 | 35 | .header__title { 36 | margin: 0; 37 | } -------------------------------------------------------------------------------- /_sass/sass/modules/_fusionad.scss: -------------------------------------------------------------------------------- 1 | /* ============================================================================= 2 | FUSION ADS 3 | ============================================================================= */ 4 | 5 | #fusionads { 6 | display: none; 7 | position: fixed; 8 | top: 12px; 9 | right: 12px; 10 | z-index: 5; 11 | padding: 12px; 12 | background: rgba(255,255,255,0.95); 13 | font-size: 12px; 14 | line-height: 1.2; 15 | box-shadow: -2px 2px 4px rgba(0,0,0,0.1); 16 | } 17 | 18 | #fusionads .fusion-wrap { 19 | display: block; 20 | margin: 0 auto 10px auto; 21 | width: 130px; 22 | } 23 | 24 | #fusionads a.fusion-text { 25 | display: block; 26 | color: $color--text-secondary; 27 | text-decoration: none; 28 | } 29 | 30 | #fusionads a.fusion-img { 31 | display: block; 32 | margin-bottom: 10px; 33 | width: 130px; 34 | height: 100px; 35 | background-color: #fff; 36 | } 37 | 38 | #fusionads a.fusion-img img { 39 | display: block; 40 | margin: 0 0 12px 0; 41 | } 42 | 43 | #fusionads a.fusion-poweredby { 44 | color: $color--accent; 45 | text-decoration: none; 46 | } 47 | 48 | @media all and ( min-width: 600px ) { 49 | #fusionads { 50 | display: block; 51 | } 52 | } -------------------------------------------------------------------------------- /_sass/sass/modules/_icons.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Material Design Iconic Font 1.0.1 by Sergey Kupletsky (@zavoloklom) - http://zavoloklom.github.io/material-design-iconic-font/ 3 | * License - https://github.com/zavoloklom/material-design-iconic-font/blob/gh-pages/License.md (Attribution-ShareAlike 4.0 International license) 4 | */ 5 | @font-face { 6 | font-family: 'Material Design Iconic Font'; 7 | src: url('../fonts/Material-Design-Iconic-Font.eot?v=1.0.1'); 8 | src: url('../fonts/Material-Design-Iconic-Font.eot?#iefix&v=1.0.1') format('embedded-opentype'), url('../fonts/Material-Design-Iconic-Font.woff?v=1.0.1') format('woff'), url('../fonts/Material-Design-Iconic-Font.ttf?v=1.0.1') format('truetype'), url('../fonts/Material-Design-Iconic-Font.svg?v=1.0.1#Material-Design-Iconic-Font') format('svg'); 9 | font-weight: normal; 10 | font-style: normal; 11 | } 12 | [class^="md-"], 13 | [class*=" md-"] { 14 | display: inline-block; 15 | font: normal normal normal 14px/1 'Material Design Iconic Font'; 16 | font-size: inherit; 17 | speak: none; 18 | text-rendering: auto; 19 | -webkit-font-smoothing: antialiased; 20 | -moz-osx-font-smoothing: grayscale; 21 | } 22 | .md { 23 | line-height: inherit; 24 | vertical-align: bottom; 25 | } 26 | .md-lg { 27 | font-size: 1.5em; 28 | line-height: .5em; 29 | vertical-align: -35%; 30 | } 31 | .md-2x { 32 | font-size: 2em; 33 | } 34 | .md-3x { 35 | font-size: 3em; 36 | } 37 | .md-4x { 38 | font-size: 4em; 39 | } 40 | .md-5x { 41 | font-size: 5em; 42 | } 43 | .md-border { 44 | padding: .2em .25em .15em; 45 | border: solid 0.08em #808080; 46 | border-radius: .1em; 47 | } 48 | .md-border-circle { 49 | padding: .2em .25em .15em; 50 | border: solid 0.08em #808080; 51 | border-radius: 50%; 52 | } 53 | [class^="md-"].pull-left, 54 | [class*=" md-"].pull-left { 55 | float: left; 56 | margin-right: .3em; 57 | } 58 | [class^="md-"].pull-right, 59 | [class*=" md-"].pull-right { 60 | float: right; 61 | margin-left: .3em; 62 | } 63 | .md-spin { 64 | -webkit-animation: md-spin 1.5s infinite linear; 65 | animation: md-spin 1.5s infinite linear; 66 | } 67 | .md-spin-reverse { 68 | -webkit-animation: md-spin-reverse 1.5s infinite linear; 69 | animation: md-spin-reverse 1.5s infinite linear; 70 | } 71 | @-webkit-keyframes md-spin { 72 | 0% { 73 | -webkit-transform: rotate(0deg); 74 | transform: rotate(0deg); 75 | } 76 | 100% { 77 | -webkit-transform: rotate(359deg); 78 | transform: rotate(359deg); 79 | } 80 | } 81 | @keyframes md-spin { 82 | 0% { 83 | -webkit-transform: rotate(0deg); 84 | transform: rotate(0deg); 85 | } 86 | 100% { 87 | -webkit-transform: rotate(359deg); 88 | transform: rotate(359deg); 89 | } 90 | } 91 | @-webkit-keyframes md-spin-reverse { 92 | 0% { 93 | -webkit-transform: rotate(0deg); 94 | transform: rotate(0deg); 95 | } 96 | 100% { 97 | -webkit-transform: rotate(-359deg); 98 | transform: rotate(-359deg); 99 | } 100 | } 101 | @keyframes md-spin-reverse { 102 | 0% { 103 | -webkit-transform: rotate(0deg); 104 | transform: rotate(0deg); 105 | } 106 | 100% { 107 | -webkit-transform: rotate(-359deg); 108 | transform: rotate(-359deg); 109 | } 110 | } 111 | .md-rotate-90 { 112 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 113 | -webkit-transform: rotate(90deg); 114 | -ms-transform: rotate(90deg); 115 | transform: rotate(90deg); 116 | } 117 | .md-rotate-180 { 118 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 119 | -webkit-transform: rotate(180deg); 120 | -ms-transform: rotate(180deg); 121 | transform: rotate(180deg); 122 | } 123 | .md-rotate-270 { 124 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 125 | -webkit-transform: rotate(270deg); 126 | -ms-transform: rotate(270deg); 127 | transform: rotate(270deg); 128 | } 129 | .md-flip-horizontal { 130 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1); 131 | -webkit-transform: scale(-1, 1); 132 | -ms-transform: scale(-1, 1); 133 | transform: scale(-1, 1); 134 | } 135 | .md-flip-vertical { 136 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1); 137 | -webkit-transform: scale(1, -1); 138 | -ms-transform: scale(1, -1); 139 | transform: scale(1, -1); 140 | } 141 | :root .md-rotate-90, 142 | :root .md-rotate-180, 143 | :root .md-rotate-270, 144 | :root .md-flip-horizontal, 145 | :root .md-flip-vertical { 146 | filter: none; 147 | } 148 | /* Material Design Iconic Font uses the Unicode Private Use Area (PUA) to ensure screen 149 | readers do not read off random characters that represent icons */ 150 | /* If you do not want use all icons you can disable icon set here */ 151 | .md-3d-rotation:before { 152 | content: "\f000"; 153 | } 154 | .md-accessibility:before { 155 | content: "\f001"; 156 | } 157 | .md-account-balance:before { 158 | content: "\f002"; 159 | } 160 | .md-account-balance-wallet:before { 161 | content: "\f003"; 162 | } 163 | .md-account-box:before { 164 | content: "\f004"; 165 | } 166 | .md-account-child:before { 167 | content: "\f005"; 168 | } 169 | .md-account-circle:before { 170 | content: "\f006"; 171 | } 172 | .md-add-shopping-cart:before { 173 | content: "\f007"; 174 | } 175 | .md-alarm:before { 176 | content: "\f008"; 177 | } 178 | .md-alarm-add:before { 179 | content: "\f009"; 180 | } 181 | .md-alarm-off:before { 182 | content: "\f00a"; 183 | } 184 | .md-alarm-on:before { 185 | content: "\f00b"; 186 | } 187 | .md-android:before { 188 | content: "\f00c"; 189 | } 190 | .md-announcement:before { 191 | content: "\f00d"; 192 | } 193 | .md-aspect-ratio:before { 194 | content: "\f00e"; 195 | } 196 | .md-assessment:before { 197 | content: "\f00f"; 198 | } 199 | .md-assignment:before { 200 | content: "\f010"; 201 | } 202 | .md-assignment-ind:before { 203 | content: "\f011"; 204 | } 205 | .md-assignment-late:before { 206 | content: "\f012"; 207 | } 208 | .md-assignment-return:before { 209 | content: "\f013"; 210 | } 211 | .md-assignment-returned:before { 212 | content: "\f014"; 213 | } 214 | .md-assignment-turned-in:before { 215 | content: "\f015"; 216 | } 217 | .md-autorenew:before { 218 | content: "\f016"; 219 | } 220 | .md-backup:before { 221 | content: "\f017"; 222 | } 223 | .md-book:before { 224 | content: "\f018"; 225 | } 226 | .md-bookmark:before { 227 | content: "\f019"; 228 | } 229 | .md-bookmark-outline:before { 230 | content: "\f01a"; 231 | } 232 | .md-bug-report:before { 233 | content: "\f01b"; 234 | } 235 | .md-cached:before { 236 | content: "\f01c"; 237 | } 238 | .md-class:before { 239 | content: "\f01d"; 240 | } 241 | .md-credit-card:before { 242 | content: "\f01e"; 243 | } 244 | .md-dashboard:before { 245 | content: "\f01f"; 246 | } 247 | .md-delete:before { 248 | content: "\f020"; 249 | } 250 | .md-description:before { 251 | content: "\f021"; 252 | } 253 | .md-dns:before { 254 | content: "\f022"; 255 | } 256 | .md-done:before { 257 | content: "\f023"; 258 | } 259 | .md-done-all:before { 260 | content: "\f024"; 261 | } 262 | .md-event:before { 263 | content: "\f025"; 264 | } 265 | .md-exit-to-app:before { 266 | content: "\f026"; 267 | } 268 | .md-explore:before { 269 | content: "\f027"; 270 | } 271 | .md-extension:before { 272 | content: "\f028"; 273 | } 274 | .md-face-unlock:before { 275 | content: "\f029"; 276 | } 277 | .md-favorite:before { 278 | content: "\f02a"; 279 | } 280 | .md-favorite-outline:before { 281 | content: "\f02b"; 282 | } 283 | .md-find-in-page:before { 284 | content: "\f02c"; 285 | } 286 | .md-find-replace:before { 287 | content: "\f02d"; 288 | } 289 | .md-flip-to-back:before { 290 | content: "\f02e"; 291 | } 292 | .md-flip-to-front:before { 293 | content: "\f02f"; 294 | } 295 | .md-get-app:before { 296 | content: "\f030"; 297 | } 298 | .md-grade:before { 299 | content: "\f031"; 300 | } 301 | .md-group-work:before { 302 | content: "\f032"; 303 | } 304 | .md-help:before { 305 | content: "\f033"; 306 | } 307 | .md-highlight-remove:before { 308 | content: "\f034"; 309 | } 310 | .md-history:before { 311 | content: "\f035"; 312 | } 313 | .md-home:before { 314 | content: "\f036"; 315 | } 316 | .md-https:before { 317 | content: "\f037"; 318 | } 319 | .md-info:before { 320 | content: "\f038"; 321 | } 322 | .md-info-outline:before { 323 | content: "\f039"; 324 | } 325 | .md-input:before { 326 | content: "\f03a"; 327 | } 328 | .md-invert-colors:before { 329 | content: "\f03b"; 330 | } 331 | .md-label:before { 332 | content: "\f03c"; 333 | } 334 | .md-label-outline:before { 335 | content: "\f03d"; 336 | } 337 | .md-language:before { 338 | content: "\f03e"; 339 | } 340 | .md-launch:before { 341 | content: "\f03f"; 342 | } 343 | .md-list:before { 344 | content: "\f040"; 345 | } 346 | .md-lock:before { 347 | content: "\f041"; 348 | } 349 | .md-lock-open:before { 350 | content: "\f042"; 351 | } 352 | .md-lock-outline:before { 353 | content: "\f043"; 354 | } 355 | .md-loyalty:before { 356 | content: "\f044"; 357 | } 358 | .md-markunread-mailbox:before { 359 | content: "\f045"; 360 | } 361 | .md-note-add:before { 362 | content: "\f046"; 363 | } 364 | .md-open-in-browser:before { 365 | content: "\f047"; 366 | } 367 | .md-open-in-new:before { 368 | content: "\f048"; 369 | } 370 | .md-open-with:before { 371 | content: "\f049"; 372 | } 373 | .md-pageview:before { 374 | content: "\f04a"; 375 | } 376 | .md-payment:before { 377 | content: "\f04b"; 378 | } 379 | .md-perm-camera-mic:before { 380 | content: "\f04c"; 381 | } 382 | .md-perm-contact-cal:before { 383 | content: "\f04d"; 384 | } 385 | .md-perm-data-setting:before { 386 | content: "\f04e"; 387 | } 388 | .md-perm-device-info:before { 389 | content: "\f04f"; 390 | } 391 | .md-perm-identity:before { 392 | content: "\f050"; 393 | } 394 | .md-perm-media:before { 395 | content: "\f051"; 396 | } 397 | .md-perm-phone-msg:before { 398 | content: "\f052"; 399 | } 400 | .md-perm-scan-wifi:before { 401 | content: "\f053"; 402 | } 403 | .md-picture-in-picture:before { 404 | content: "\f054"; 405 | } 406 | .md-polymer:before { 407 | content: "\f055"; 408 | } 409 | .md-print:before { 410 | content: "\f056"; 411 | } 412 | .md-query-builder:before { 413 | content: "\f057"; 414 | } 415 | .md-question-answer:before { 416 | content: "\f058"; 417 | } 418 | .md-receipt:before { 419 | content: "\f059"; 420 | } 421 | .md-redeem:before { 422 | content: "\f05a"; 423 | } 424 | .md-report-problem:before { 425 | content: "\f05b"; 426 | } 427 | .md-restore:before { 428 | content: "\f05c"; 429 | } 430 | .md-room:before { 431 | content: "\f05d"; 432 | } 433 | .md-schedule:before { 434 | content: "\f05e"; 435 | } 436 | .md-search:before { 437 | content: "\f05f"; 438 | } 439 | .md-settings:before { 440 | content: "\f060"; 441 | } 442 | .md-settings-applications:before { 443 | content: "\f061"; 444 | } 445 | .md-settings-backup-restore:before { 446 | content: "\f062"; 447 | } 448 | .md-settings-bluetooth:before { 449 | content: "\f063"; 450 | } 451 | .md-settings-cell:before { 452 | content: "\f064"; 453 | } 454 | .md-settings-display:before { 455 | content: "\f065"; 456 | } 457 | .md-settings-ethernet:before { 458 | content: "\f066"; 459 | } 460 | .md-settings-input-antenna:before { 461 | content: "\f067"; 462 | } 463 | .md-settings-input-component:before { 464 | content: "\f068"; 465 | } 466 | .md-settings-input-composite:before { 467 | content: "\f069"; 468 | } 469 | .md-settings-input-hdmi:before { 470 | content: "\f06a"; 471 | } 472 | .md-settings-input-svideo:before { 473 | content: "\f06b"; 474 | } 475 | .md-settings-overscan:before { 476 | content: "\f06c"; 477 | } 478 | .md-settings-phone:before { 479 | content: "\f06d"; 480 | } 481 | .md-settings-power:before { 482 | content: "\f06e"; 483 | } 484 | .md-settings-remote:before { 485 | content: "\f06f"; 486 | } 487 | .md-settings-voice:before { 488 | content: "\f070"; 489 | } 490 | .md-shop:before { 491 | content: "\f071"; 492 | } 493 | .md-shopping-basket:before { 494 | content: "\f072"; 495 | } 496 | .md-shopping-cart:before { 497 | content: "\f073"; 498 | } 499 | .md-shop-two:before { 500 | content: "\f074"; 501 | } 502 | .md-speaker-notes:before { 503 | content: "\f075"; 504 | } 505 | .md-spellcheck:before { 506 | content: "\f076"; 507 | } 508 | .md-star-rate:before { 509 | content: "\f077"; 510 | } 511 | .md-stars:before { 512 | content: "\f078"; 513 | } 514 | .md-store:before { 515 | content: "\f079"; 516 | } 517 | .md-subject:before { 518 | content: "\f07a"; 519 | } 520 | .md-swap-horiz:before { 521 | content: "\f07b"; 522 | } 523 | .md-swap-vert:before { 524 | content: "\f07c"; 525 | } 526 | .md-swap-vert-circle:before { 527 | content: "\f07d"; 528 | } 529 | .md-system-update-tv:before { 530 | content: "\f07e"; 531 | } 532 | .md-tab:before { 533 | content: "\f07f"; 534 | } 535 | .md-tab-unselected:before { 536 | content: "\f080"; 537 | } 538 | .md-theaters:before { 539 | content: "\f081"; 540 | } 541 | .md-thumb-down:before { 542 | content: "\f082"; 543 | } 544 | .md-thumbs-up-down:before { 545 | content: "\f083"; 546 | } 547 | .md-thumb-up:before { 548 | content: "\f084"; 549 | } 550 | .md-toc:before { 551 | content: "\f085"; 552 | } 553 | .md-today:before { 554 | content: "\f086"; 555 | } 556 | .md-track-changes:before { 557 | content: "\f087"; 558 | } 559 | .md-translate:before { 560 | content: "\f088"; 561 | } 562 | .md-trending-down:before { 563 | content: "\f089"; 564 | } 565 | .md-trending-neutral:before { 566 | content: "\f08a"; 567 | } 568 | .md-trending-up:before { 569 | content: "\f08b"; 570 | } 571 | .md-turned-in:before { 572 | content: "\f08c"; 573 | } 574 | .md-turned-in-not:before { 575 | content: "\f08d"; 576 | } 577 | .md-verified-user:before { 578 | content: "\f08e"; 579 | } 580 | .md-view-agenda:before { 581 | content: "\f08f"; 582 | } 583 | .md-view-array:before { 584 | content: "\f090"; 585 | } 586 | .md-view-carousel:before { 587 | content: "\f091"; 588 | } 589 | .md-view-column:before { 590 | content: "\f092"; 591 | } 592 | .md-view-day:before { 593 | content: "\f093"; 594 | } 595 | .md-view-headline:before { 596 | content: "\f094"; 597 | } 598 | .md-view-list:before { 599 | content: "\f095"; 600 | } 601 | .md-view-module:before { 602 | content: "\f096"; 603 | } 604 | .md-view-quilt:before { 605 | content: "\f097"; 606 | } 607 | .md-view-stream:before { 608 | content: "\f098"; 609 | } 610 | .md-view-week:before { 611 | content: "\f099"; 612 | } 613 | .md-visibility:before { 614 | content: "\f09a"; 615 | } 616 | .md-visibility-off:before { 617 | content: "\f09b"; 618 | } 619 | .md-wallet-giftcard:before { 620 | content: "\f09c"; 621 | } 622 | .md-wallet-membership:before { 623 | content: "\f09d"; 624 | } 625 | .md-wallet-travel:before { 626 | content: "\f09e"; 627 | } 628 | .md-work:before { 629 | content: "\f09f"; 630 | } 631 | .md-error:before { 632 | content: "\f0a0"; 633 | } 634 | .md-warning:before { 635 | content: "\f0a1"; 636 | } 637 | .md-album:before { 638 | content: "\f0a2"; 639 | } 640 | .md-av-timer:before { 641 | content: "\f0a3"; 642 | } 643 | .md-closed-caption:before { 644 | content: "\f0a4"; 645 | } 646 | .md-equalizer:before { 647 | content: "\f0a5"; 648 | } 649 | .md-explicit:before { 650 | content: "\f0a6"; 651 | } 652 | .md-fast-forward:before { 653 | content: "\f0a7"; 654 | } 655 | .md-fast-rewind:before { 656 | content: "\f0a8"; 657 | } 658 | .md-games:before { 659 | content: "\f0a9"; 660 | } 661 | .md-hearing:before { 662 | content: "\f0aa"; 663 | } 664 | .md-high-quality:before { 665 | content: "\f0ab"; 666 | } 667 | .md-loop:before { 668 | content: "\f0ac"; 669 | } 670 | .md-mic:before { 671 | content: "\f0ad"; 672 | } 673 | .md-mic-none:before { 674 | content: "\f0ae"; 675 | } 676 | .md-mic-off:before { 677 | content: "\f0af"; 678 | } 679 | .md-movie:before { 680 | content: "\f0b0"; 681 | } 682 | .md-my-library-add:before { 683 | content: "\f0b1"; 684 | } 685 | .md-my-library-books:before { 686 | content: "\f0b2"; 687 | } 688 | .md-my-library-music:before { 689 | content: "\f0b3"; 690 | } 691 | .md-new-releases:before { 692 | content: "\f0b4"; 693 | } 694 | .md-not-interested:before { 695 | content: "\f0b5"; 696 | } 697 | .md-pause:before { 698 | content: "\f0b6"; 699 | } 700 | .md-pause-circle-fill:before { 701 | content: "\f0b7"; 702 | } 703 | .md-pause-circle-outline:before { 704 | content: "\f0b8"; 705 | } 706 | .md-play-arrow:before { 707 | content: "\f0b9"; 708 | } 709 | .md-play-circle-fill:before { 710 | content: "\f0ba"; 711 | } 712 | .md-play-circle-outline:before { 713 | content: "\f0bb"; 714 | } 715 | .md-playlist-add:before { 716 | content: "\f0bc"; 717 | } 718 | .md-play-shopping-bag:before { 719 | content: "\f0bd"; 720 | } 721 | .md-queue:before { 722 | content: "\f0be"; 723 | } 724 | .md-queue-music:before { 725 | content: "\f0bf"; 726 | } 727 | .md-radio:before { 728 | content: "\f0c0"; 729 | } 730 | .md-recent-actors:before { 731 | content: "\f0c1"; 732 | } 733 | .md-repeat:before { 734 | content: "\f0c2"; 735 | } 736 | .md-repeat-one:before { 737 | content: "\f0c3"; 738 | } 739 | .md-replay:before { 740 | content: "\f0c4"; 741 | } 742 | .md-shuffle:before { 743 | content: "\f0c5"; 744 | } 745 | .md-skip-next:before { 746 | content: "\f0c6"; 747 | } 748 | .md-skip-previous:before { 749 | content: "\f0c7"; 750 | } 751 | .md-snooze:before { 752 | content: "\f0c8"; 753 | } 754 | .md-stop:before { 755 | content: "\f0c9"; 756 | } 757 | .md-subtitles:before { 758 | content: "\f0ca"; 759 | } 760 | .md-surround-sound:before { 761 | content: "\f0cb"; 762 | } 763 | .md-videocam:before { 764 | content: "\f0cc"; 765 | } 766 | .md-videocam-off:before { 767 | content: "\f0cd"; 768 | } 769 | .md-video-collection:before { 770 | content: "\f0ce"; 771 | } 772 | .md-volume-down:before { 773 | content: "\f0cf"; 774 | } 775 | .md-volume-mute:before { 776 | content: "\f0d0"; 777 | } 778 | .md-volume-off:before { 779 | content: "\f0d1"; 780 | } 781 | .md-volume-up:before { 782 | content: "\f0d2"; 783 | } 784 | .md-web:before { 785 | content: "\f0d3"; 786 | } 787 | .md-business:before { 788 | content: "\f0d4"; 789 | } 790 | .md-call:before { 791 | content: "\f0d5"; 792 | } 793 | .md-call-end:before { 794 | content: "\f0d6"; 795 | } 796 | .md-call-made:before { 797 | content: "\f0d7"; 798 | } 799 | .md-call-merge:before { 800 | content: "\f0d8"; 801 | } 802 | .md-call-missed:before { 803 | content: "\f0d9"; 804 | } 805 | .md-call-received:before { 806 | content: "\f0da"; 807 | } 808 | .md-call-split:before { 809 | content: "\f0db"; 810 | } 811 | .md-chat:before { 812 | content: "\f0dc"; 813 | } 814 | .md-clear-all:before { 815 | content: "\f0dd"; 816 | } 817 | .md-comment:before { 818 | content: "\f0de"; 819 | } 820 | .md-contacts:before { 821 | content: "\f0df"; 822 | } 823 | .md-dialer-sip:before { 824 | content: "\f0e0"; 825 | } 826 | .md-dialpad:before { 827 | content: "\f0e1"; 828 | } 829 | .md-dnd-on:before { 830 | content: "\f0e2"; 831 | } 832 | .md-email:before { 833 | content: "\f0e3"; 834 | } 835 | .md-forum:before { 836 | content: "\f0e4"; 837 | } 838 | .md-import-export:before { 839 | content: "\f0e5"; 840 | } 841 | .md-invert-colors-off:before { 842 | content: "\f0e6"; 843 | } 844 | .md-invert-colors-on:before { 845 | content: "\f0e7"; 846 | } 847 | .md-live-help:before { 848 | content: "\f0e8"; 849 | } 850 | .md-location-off:before { 851 | content: "\f0e9"; 852 | } 853 | .md-location-on:before { 854 | content: "\f0ea"; 855 | } 856 | .md-message:before { 857 | content: "\f0eb"; 858 | } 859 | .md-messenger:before { 860 | content: "\f0ec"; 861 | } 862 | .md-no-sim:before { 863 | content: "\f0ed"; 864 | } 865 | .md-phone:before { 866 | content: "\f0ee"; 867 | } 868 | .md-portable-wifi-off:before { 869 | content: "\f0ef"; 870 | } 871 | .md-quick-contacts-dialer:before { 872 | content: "\f0f0"; 873 | } 874 | .md-quick-contacts-mail:before { 875 | content: "\f0f1"; 876 | } 877 | .md-ring-volume:before { 878 | content: "\f0f2"; 879 | } 880 | .md-stay-current-landscape:before { 881 | content: "\f0f3"; 882 | } 883 | .md-stay-current-portrait:before { 884 | content: "\f0f4"; 885 | } 886 | .md-stay-primary-landscape:before { 887 | content: "\f0f5"; 888 | } 889 | .md-stay-primary-portrait:before { 890 | content: "\f0f6"; 891 | } 892 | .md-swap-calls:before { 893 | content: "\f0f7"; 894 | } 895 | .md-textsms:before { 896 | content: "\f0f8"; 897 | } 898 | .md-voicemail:before { 899 | content: "\f0f9"; 900 | } 901 | .md-vpn-key:before { 902 | content: "\f0fa"; 903 | } 904 | .md-add:before { 905 | content: "\f0fb"; 906 | } 907 | .md-add-box:before { 908 | content: "\f0fc"; 909 | } 910 | .md-add-circle:before { 911 | content: "\f0fd"; 912 | } 913 | .md-add-circle-outline:before { 914 | content: "\f0fe"; 915 | } 916 | .md-archive:before { 917 | content: "\f0ff"; 918 | } 919 | .md-backspace:before { 920 | content: "\f100"; 921 | } 922 | .md-block:before { 923 | content: "\f101"; 924 | } 925 | .md-clear:before { 926 | content: "\f102"; 927 | } 928 | .md-content-copy:before { 929 | content: "\f103"; 930 | } 931 | .md-content-cut:before { 932 | content: "\f104"; 933 | } 934 | .md-content-paste:before { 935 | content: "\f105"; 936 | } 937 | .md-create:before { 938 | content: "\f106"; 939 | } 940 | .md-drafts:before { 941 | content: "\f107"; 942 | } 943 | .md-filter-list:before { 944 | content: "\f108"; 945 | } 946 | .md-flag:before { 947 | content: "\f109"; 948 | } 949 | .md-forward:before { 950 | content: "\f10a"; 951 | } 952 | .md-gesture:before { 953 | content: "\f10b"; 954 | } 955 | .md-inbox:before { 956 | content: "\f10c"; 957 | } 958 | .md-link:before { 959 | content: "\f10d"; 960 | } 961 | .md-mail:before { 962 | content: "\f10e"; 963 | } 964 | .md-markunread:before { 965 | content: "\f10f"; 966 | } 967 | .md-redo:before { 968 | content: "\f110"; 969 | } 970 | .md-remove:before { 971 | content: "\f111"; 972 | } 973 | .md-remove-circle:before { 974 | content: "\f112"; 975 | } 976 | .md-remove-circle-outline:before { 977 | content: "\f113"; 978 | } 979 | .md-reply:before { 980 | content: "\f114"; 981 | } 982 | .md-reply-all:before { 983 | content: "\f115"; 984 | } 985 | .md-report:before { 986 | content: "\f116"; 987 | } 988 | .md-save:before { 989 | content: "\f117"; 990 | } 991 | .md-select-all:before { 992 | content: "\f118"; 993 | } 994 | .md-send:before { 995 | content: "\f119"; 996 | } 997 | .md-sort:before { 998 | content: "\f11a"; 999 | } 1000 | .md-text-format:before { 1001 | content: "\f11b"; 1002 | } 1003 | .md-undo:before { 1004 | content: "\f11c"; 1005 | } 1006 | .md-access-alarm:before { 1007 | content: "\f11d"; 1008 | } 1009 | .md-access-alarms:before { 1010 | content: "\f11e"; 1011 | } 1012 | .md-access-time:before { 1013 | content: "\f11f"; 1014 | } 1015 | .md-add-alarm:before { 1016 | content: "\f120"; 1017 | } 1018 | .md-airplanemode-off:before { 1019 | content: "\f121"; 1020 | } 1021 | .md-airplanemode-on:before { 1022 | content: "\f122"; 1023 | } 1024 | .md-battery-20:before { 1025 | content: "\f123"; 1026 | } 1027 | .md-battery-30:before { 1028 | content: "\f124"; 1029 | } 1030 | .md-battery-50:before { 1031 | content: "\f125"; 1032 | } 1033 | .md-battery-60:before { 1034 | content: "\f126"; 1035 | } 1036 | .md-battery-80:before { 1037 | content: "\f127"; 1038 | } 1039 | .md-battery-90:before { 1040 | content: "\f128"; 1041 | } 1042 | .md-battery-alert:before { 1043 | content: "\f129"; 1044 | } 1045 | .md-battery-charging-20:before { 1046 | content: "\f12a"; 1047 | } 1048 | .md-battery-charging-30:before { 1049 | content: "\f12b"; 1050 | } 1051 | .md-battery-charging-50:before { 1052 | content: "\f12c"; 1053 | } 1054 | .md-battery-charging-60:before { 1055 | content: "\f12d"; 1056 | } 1057 | .md-battery-charging-80:before { 1058 | content: "\f12e"; 1059 | } 1060 | .md-battery-charging-90:before { 1061 | content: "\f12f"; 1062 | } 1063 | .md-battery-charging-full:before { 1064 | content: "\f130"; 1065 | } 1066 | .md-battery-full:before { 1067 | content: "\f131"; 1068 | } 1069 | .md-battery-std:before { 1070 | content: "\f132"; 1071 | } 1072 | .md-battery-unknown:before { 1073 | content: "\f133"; 1074 | } 1075 | .md-bluetooth:before { 1076 | content: "\f134"; 1077 | } 1078 | .md-bluetooth-connected:before { 1079 | content: "\f135"; 1080 | } 1081 | .md-bluetooth-disabled:before { 1082 | content: "\f136"; 1083 | } 1084 | .md-bluetooth-searching:before { 1085 | content: "\f137"; 1086 | } 1087 | .md-brightness-auto:before { 1088 | content: "\f138"; 1089 | } 1090 | .md-brightness-high:before { 1091 | content: "\f139"; 1092 | } 1093 | .md-brightness-low:before { 1094 | content: "\f13a"; 1095 | } 1096 | .md-brightness-medium:before { 1097 | content: "\f13b"; 1098 | } 1099 | .md-data-usage:before { 1100 | content: "\f13c"; 1101 | } 1102 | .md-developer-mode:before { 1103 | content: "\f13d"; 1104 | } 1105 | .md-devices:before { 1106 | content: "\f13e"; 1107 | } 1108 | .md-dvr:before { 1109 | content: "\f13f"; 1110 | } 1111 | .md-gps-fixed:before { 1112 | content: "\f140"; 1113 | } 1114 | .md-gps-not-fixed:before { 1115 | content: "\f141"; 1116 | } 1117 | .md-gps-off:before { 1118 | content: "\f142"; 1119 | } 1120 | .md-location-disabled:before { 1121 | content: "\f143"; 1122 | } 1123 | .md-location-searching:before { 1124 | content: "\f144"; 1125 | } 1126 | .md-multitrack-audio:before { 1127 | content: "\f145"; 1128 | } 1129 | .md-network-cell:before { 1130 | content: "\f146"; 1131 | } 1132 | .md-network-wifi:before { 1133 | content: "\f147"; 1134 | } 1135 | .md-nfc:before { 1136 | content: "\f148"; 1137 | } 1138 | .md-now-wallpaper:before { 1139 | content: "\f149"; 1140 | } 1141 | .md-now-widgets:before { 1142 | content: "\f14a"; 1143 | } 1144 | .md-screen-lock-landscape:before { 1145 | content: "\f14b"; 1146 | } 1147 | .md-screen-lock-portrait:before { 1148 | content: "\f14c"; 1149 | } 1150 | .md-screen-lock-rotation:before { 1151 | content: "\f14d"; 1152 | } 1153 | .md-screen-rotation:before { 1154 | content: "\f14e"; 1155 | } 1156 | .md-sd-storage:before { 1157 | content: "\f14f"; 1158 | } 1159 | .md-settings-system-daydream:before { 1160 | content: "\f150"; 1161 | } 1162 | .md-signal-cellular-0-bar:before { 1163 | content: "\f151"; 1164 | } 1165 | .md-signal-cellular-1-bar:before { 1166 | content: "\f152"; 1167 | } 1168 | .md-signal-cellular-2-bar:before { 1169 | content: "\f153"; 1170 | } 1171 | .md-signal-cellular-3-bar:before { 1172 | content: "\f154"; 1173 | } 1174 | .md-signal-cellular-4-bar:before { 1175 | content: "\f155"; 1176 | } 1177 | .md-signal-cellular-connected-no-internet-0-bar:before { 1178 | content: "\f156"; 1179 | } 1180 | .md-signal-cellular-connected-no-internet-1-bar:before { 1181 | content: "\f157"; 1182 | } 1183 | .md-signal-cellular-connected-no-internet-2-bar:before { 1184 | content: "\f158"; 1185 | } 1186 | .md-signal-cellular-connected-no-internet-3-bar:before { 1187 | content: "\f159"; 1188 | } 1189 | .md-signal-cellular-connected-no-internet-4-bar:before { 1190 | content: "\f15a"; 1191 | } 1192 | .md-signal-cellular-no-sim:before { 1193 | content: "\f15b"; 1194 | } 1195 | .md-signal-cellular-null:before { 1196 | content: "\f15c"; 1197 | } 1198 | .md-signal-cellular-off:before { 1199 | content: "\f15d"; 1200 | } 1201 | .md-signal-wifi-0-bar:before { 1202 | content: "\f15e"; 1203 | } 1204 | .md-signal-wifi-1-bar:before { 1205 | content: "\f15f"; 1206 | } 1207 | .md-signal-wifi-2-bar:before { 1208 | content: "\f160"; 1209 | } 1210 | .md-signal-wifi-3-bar:before { 1211 | content: "\f161"; 1212 | } 1213 | .md-signal-wifi-4-bar:before { 1214 | content: "\f162"; 1215 | } 1216 | .md-signal-wifi-off:before { 1217 | content: "\f163"; 1218 | } 1219 | .md-storage:before { 1220 | content: "\f164"; 1221 | } 1222 | .md-usb:before { 1223 | content: "\f165"; 1224 | } 1225 | .md-wifi-lock:before { 1226 | content: "\f166"; 1227 | } 1228 | .md-wifi-tethering:before { 1229 | content: "\f167"; 1230 | } 1231 | .md-attach-file:before { 1232 | content: "\f168"; 1233 | } 1234 | .md-attach-money:before { 1235 | content: "\f169"; 1236 | } 1237 | .md-border-all:before { 1238 | content: "\f16a"; 1239 | } 1240 | .md-border-bottom:before { 1241 | content: "\f16b"; 1242 | } 1243 | .md-border-clear:before { 1244 | content: "\f16c"; 1245 | } 1246 | .md-border-color:before { 1247 | content: "\f16d"; 1248 | } 1249 | .md-border-horizontal:before { 1250 | content: "\f16e"; 1251 | } 1252 | .md-border-inner:before { 1253 | content: "\f16f"; 1254 | } 1255 | .md-border-left:before { 1256 | content: "\f170"; 1257 | } 1258 | .md-border-outer:before { 1259 | content: "\f171"; 1260 | } 1261 | .md-border-right:before { 1262 | content: "\f172"; 1263 | } 1264 | .md-border-style:before { 1265 | content: "\f173"; 1266 | } 1267 | .md-border-top:before { 1268 | content: "\f174"; 1269 | } 1270 | .md-border-vertical:before { 1271 | content: "\f175"; 1272 | } 1273 | .md-format-align-center:before { 1274 | content: "\f176"; 1275 | } 1276 | .md-format-align-justify:before { 1277 | content: "\f177"; 1278 | } 1279 | .md-format-align-left:before { 1280 | content: "\f178"; 1281 | } 1282 | .md-format-align-right:before { 1283 | content: "\f179"; 1284 | } 1285 | .md-format-bold:before { 1286 | content: "\f17a"; 1287 | } 1288 | .md-format-clear:before { 1289 | content: "\f17b"; 1290 | } 1291 | .md-format-color-fill:before { 1292 | content: "\f17c"; 1293 | } 1294 | .md-format-color-reset:before { 1295 | content: "\f17d"; 1296 | } 1297 | .md-format-color-text:before { 1298 | content: "\f17e"; 1299 | } 1300 | .md-format-indent-decrease:before { 1301 | content: "\f17f"; 1302 | } 1303 | .md-format-indent-increase:before { 1304 | content: "\f180"; 1305 | } 1306 | .md-format-italic:before { 1307 | content: "\f181"; 1308 | } 1309 | .md-format-line-spacing:before { 1310 | content: "\f182"; 1311 | } 1312 | .md-format-list-bulleted:before { 1313 | content: "\f183"; 1314 | } 1315 | .md-format-list-numbered:before { 1316 | content: "\f184"; 1317 | } 1318 | .md-format-paint:before { 1319 | content: "\f185"; 1320 | } 1321 | .md-format-quote:before { 1322 | content: "\f186"; 1323 | } 1324 | .md-format-size:before { 1325 | content: "\f187"; 1326 | } 1327 | .md-format-strikethrough:before { 1328 | content: "\f188"; 1329 | } 1330 | .md-format-textdirection-l-to-r:before { 1331 | content: "\f189"; 1332 | } 1333 | .md-format-textdirection-r-to-l:before { 1334 | content: "\f18a"; 1335 | } 1336 | .md-format-underline:before { 1337 | content: "\f18b"; 1338 | } 1339 | .md-functions:before { 1340 | content: "\f18c"; 1341 | } 1342 | .md-insert-chart:before { 1343 | content: "\f18d"; 1344 | } 1345 | .md-insert-comment:before { 1346 | content: "\f18e"; 1347 | } 1348 | .md-insert-drive-file:before { 1349 | content: "\f18f"; 1350 | } 1351 | .md-insert-emoticon:before { 1352 | content: "\f190"; 1353 | } 1354 | .md-insert-invitation:before { 1355 | content: "\f191"; 1356 | } 1357 | .md-insert-link:before { 1358 | content: "\f192"; 1359 | } 1360 | .md-insert-photo:before { 1361 | content: "\f193"; 1362 | } 1363 | .md-merge-type:before { 1364 | content: "\f194"; 1365 | } 1366 | .md-mode-comment:before { 1367 | content: "\f195"; 1368 | } 1369 | .md-mode-edit:before { 1370 | content: "\f196"; 1371 | } 1372 | .md-publish:before { 1373 | content: "\f197"; 1374 | } 1375 | .md-vertical-align-bottom:before { 1376 | content: "\f198"; 1377 | } 1378 | .md-vertical-align-center:before { 1379 | content: "\f199"; 1380 | } 1381 | .md-vertical-align-top:before { 1382 | content: "\f19a"; 1383 | } 1384 | .md-wrap-text:before { 1385 | content: "\f19b"; 1386 | } 1387 | .md-attachment:before { 1388 | content: "\f19c"; 1389 | } 1390 | .md-cloud:before { 1391 | content: "\f19d"; 1392 | } 1393 | .md-cloud-circle:before { 1394 | content: "\f19e"; 1395 | } 1396 | .md-cloud-done:before { 1397 | content: "\f19f"; 1398 | } 1399 | .md-cloud-download:before { 1400 | content: "\f1a0"; 1401 | } 1402 | .md-cloud-off:before { 1403 | content: "\f1a1"; 1404 | } 1405 | .md-cloud-queue:before { 1406 | content: "\f1a2"; 1407 | } 1408 | .md-cloud-upload:before { 1409 | content: "\f1a3"; 1410 | } 1411 | .md-file-download:before { 1412 | content: "\f1a4"; 1413 | } 1414 | .md-file-upload:before { 1415 | content: "\f1a5"; 1416 | } 1417 | .md-folder:before { 1418 | content: "\f1a6"; 1419 | } 1420 | .md-folder-open:before { 1421 | content: "\f1a7"; 1422 | } 1423 | .md-folder-shared:before { 1424 | content: "\f1a8"; 1425 | } 1426 | .md-cast:before { 1427 | content: "\f1a9"; 1428 | } 1429 | .md-cast-connected:before { 1430 | content: "\f1aa"; 1431 | } 1432 | .md-computer:before { 1433 | content: "\f1ab"; 1434 | } 1435 | .md-desktop-mac:before { 1436 | content: "\f1ac"; 1437 | } 1438 | .md-desktop-windows:before { 1439 | content: "\f1ad"; 1440 | } 1441 | .md-dock:before { 1442 | content: "\f1ae"; 1443 | } 1444 | .md-gamepad:before { 1445 | content: "\f1af"; 1446 | } 1447 | .md-headset:before { 1448 | content: "\f1b0"; 1449 | } 1450 | .md-headset-mic:before { 1451 | content: "\f1b1"; 1452 | } 1453 | .md-keyboard:before { 1454 | content: "\f1b2"; 1455 | } 1456 | .md-keyboard-alt:before { 1457 | content: "\f1b3"; 1458 | } 1459 | .md-keyboard-arrow-down:before { 1460 | content: "\f1b4"; 1461 | } 1462 | .md-keyboard-arrow-left:before { 1463 | content: "\f1b5"; 1464 | } 1465 | .md-keyboard-arrow-right:before { 1466 | content: "\f1b6"; 1467 | } 1468 | .md-keyboard-arrow-up:before { 1469 | content: "\f1b7"; 1470 | } 1471 | .md-keyboard-backspace:before { 1472 | content: "\f1b8"; 1473 | } 1474 | .md-keyboard-capslock:before { 1475 | content: "\f1b9"; 1476 | } 1477 | .md-keyboard-control:before { 1478 | content: "\f1ba"; 1479 | } 1480 | .md-keyboard-hide:before { 1481 | content: "\f1bb"; 1482 | } 1483 | .md-keyboard-return:before { 1484 | content: "\f1bc"; 1485 | } 1486 | .md-keyboard-tab:before { 1487 | content: "\f1bd"; 1488 | } 1489 | .md-keyboard-voice:before { 1490 | content: "\f1be"; 1491 | } 1492 | .md-laptop:before { 1493 | content: "\f1bf"; 1494 | } 1495 | .md-laptop-chromebook:before { 1496 | content: "\f1c0"; 1497 | } 1498 | .md-laptop-mac:before { 1499 | content: "\f1c1"; 1500 | } 1501 | .md-laptop-windows:before { 1502 | content: "\f1c2"; 1503 | } 1504 | .md-memory:before { 1505 | content: "\f1c3"; 1506 | } 1507 | .md-mouse:before { 1508 | content: "\f1c4"; 1509 | } 1510 | .md-phone-android:before { 1511 | content: "\f1c5"; 1512 | } 1513 | .md-phone-iphone:before { 1514 | content: "\f1c6"; 1515 | } 1516 | .md-phonelink:before { 1517 | content: "\f1c7"; 1518 | } 1519 | .md-phonelink-off:before { 1520 | content: "\f1c8"; 1521 | } 1522 | .md-security:before { 1523 | content: "\f1c9"; 1524 | } 1525 | .md-sim-card:before { 1526 | content: "\f1ca"; 1527 | } 1528 | .md-smartphone:before { 1529 | content: "\f1cb"; 1530 | } 1531 | .md-speaker:before { 1532 | content: "\f1cc"; 1533 | } 1534 | .md-tablet:before { 1535 | content: "\f1cd"; 1536 | } 1537 | .md-tablet-android:before { 1538 | content: "\f1ce"; 1539 | } 1540 | .md-tablet-mac:before { 1541 | content: "\f1cf"; 1542 | } 1543 | .md-tv:before { 1544 | content: "\f1d0"; 1545 | } 1546 | .md-watch:before { 1547 | content: "\f1d1"; 1548 | } 1549 | .md-add-to-photos:before { 1550 | content: "\f1d2"; 1551 | } 1552 | .md-adjust:before { 1553 | content: "\f1d3"; 1554 | } 1555 | .md-assistant-photo:before { 1556 | content: "\f1d4"; 1557 | } 1558 | .md-audiotrack:before { 1559 | content: "\f1d5"; 1560 | } 1561 | .md-blur-circular:before { 1562 | content: "\f1d6"; 1563 | } 1564 | .md-blur-linear:before { 1565 | content: "\f1d7"; 1566 | } 1567 | .md-blur-off:before { 1568 | content: "\f1d8"; 1569 | } 1570 | .md-blur-on:before { 1571 | content: "\f1d9"; 1572 | } 1573 | .md-brightness-1:before { 1574 | content: "\f1da"; 1575 | } 1576 | .md-brightness-2:before { 1577 | content: "\f1db"; 1578 | } 1579 | .md-brightness-3:before { 1580 | content: "\f1dc"; 1581 | } 1582 | .md-brightness-4:before { 1583 | content: "\f1dd"; 1584 | } 1585 | .md-brightness-5:before { 1586 | content: "\f1de"; 1587 | } 1588 | .md-brightness-6:before { 1589 | content: "\f1df"; 1590 | } 1591 | .md-brightness-7:before { 1592 | content: "\f1e0"; 1593 | } 1594 | .md-brush:before { 1595 | content: "\f1e1"; 1596 | } 1597 | .md-camera:before { 1598 | content: "\f1e2"; 1599 | } 1600 | .md-camera-alt:before { 1601 | content: "\f1e3"; 1602 | } 1603 | .md-camera-front:before { 1604 | content: "\f1e4"; 1605 | } 1606 | .md-camera-rear:before { 1607 | content: "\f1e5"; 1608 | } 1609 | .md-camera-roll:before { 1610 | content: "\f1e6"; 1611 | } 1612 | .md-center-focus-strong:before { 1613 | content: "\f1e7"; 1614 | } 1615 | .md-center-focus-weak:before { 1616 | content: "\f1e8"; 1617 | } 1618 | .md-collections:before { 1619 | content: "\f1e9"; 1620 | } 1621 | .md-colorize:before { 1622 | content: "\f1ea"; 1623 | } 1624 | .md-color-lens:before { 1625 | content: "\f1eb"; 1626 | } 1627 | .md-compare:before { 1628 | content: "\f1ec"; 1629 | } 1630 | .md-control-point:before { 1631 | content: "\f1ed"; 1632 | } 1633 | .md-control-point-duplicate:before { 1634 | content: "\f1ee"; 1635 | } 1636 | .md-crop:before { 1637 | content: "\f1ef"; 1638 | } 1639 | .md-crop-3-2:before { 1640 | content: "\f1f0"; 1641 | } 1642 | .md-crop-5-4:before { 1643 | content: "\f1f1"; 1644 | } 1645 | .md-crop-7-5:before { 1646 | content: "\f1f2"; 1647 | } 1648 | .md-crop-16-9:before { 1649 | content: "\f1f3"; 1650 | } 1651 | .md-crop-din:before { 1652 | content: "\f1f4"; 1653 | } 1654 | .md-crop-free:before { 1655 | content: "\f1f5"; 1656 | } 1657 | .md-crop-landscape:before { 1658 | content: "\f1f6"; 1659 | } 1660 | .md-crop-original:before { 1661 | content: "\f1f7"; 1662 | } 1663 | .md-crop-portrait:before { 1664 | content: "\f1f8"; 1665 | } 1666 | .md-crop-square:before { 1667 | content: "\f1f9"; 1668 | } 1669 | .md-dehaze:before { 1670 | content: "\f1fa"; 1671 | } 1672 | .md-details:before { 1673 | content: "\f1fb"; 1674 | } 1675 | .md-edit:before { 1676 | content: "\f1fc"; 1677 | } 1678 | .md-exposure:before { 1679 | content: "\f1fd"; 1680 | } 1681 | .md-exposure-minus-1:before { 1682 | content: "\f1fe"; 1683 | } 1684 | .md-exposure-minus-2:before { 1685 | content: "\f1ff"; 1686 | } 1687 | .md-exposure-zero:before { 1688 | content: "\f200"; 1689 | } 1690 | .md-exposure-plus-1:before { 1691 | content: "\f201"; 1692 | } 1693 | .md-exposure-plus-2:before { 1694 | content: "\f202"; 1695 | } 1696 | .md-filter:before { 1697 | content: "\f203"; 1698 | } 1699 | .md-filter-1:before { 1700 | content: "\f204"; 1701 | } 1702 | .md-filter-2:before { 1703 | content: "\f205"; 1704 | } 1705 | .md-filter-3:before { 1706 | content: "\f206"; 1707 | } 1708 | .md-filter-4:before { 1709 | content: "\f207"; 1710 | } 1711 | .md-filter-5:before { 1712 | content: "\f208"; 1713 | } 1714 | .md-filter-6:before { 1715 | content: "\f209"; 1716 | } 1717 | .md-filter-7:before { 1718 | content: "\f20a"; 1719 | } 1720 | .md-filter-8:before { 1721 | content: "\f20b"; 1722 | } 1723 | .md-filter-9:before { 1724 | content: "\f20c"; 1725 | } 1726 | .md-filter-9-plus:before { 1727 | content: "\f20d"; 1728 | } 1729 | .md-filter-b-and-w:before { 1730 | content: "\f20e"; 1731 | } 1732 | .md-filter-center-focus:before { 1733 | content: "\f20f"; 1734 | } 1735 | .md-filter-drama:before { 1736 | content: "\f210"; 1737 | } 1738 | .md-filter-frames:before { 1739 | content: "\f211"; 1740 | } 1741 | .md-filter-hdr:before { 1742 | content: "\f212"; 1743 | } 1744 | .md-filter-none:before { 1745 | content: "\f213"; 1746 | } 1747 | .md-filter-tilt-shift:before { 1748 | content: "\f214"; 1749 | } 1750 | .md-filter-vintage:before { 1751 | content: "\f215"; 1752 | } 1753 | .md-flare:before { 1754 | content: "\f216"; 1755 | } 1756 | .md-flash-auto:before { 1757 | content: "\f217"; 1758 | } 1759 | .md-flash-off:before { 1760 | content: "\f218"; 1761 | } 1762 | .md-flash-on:before { 1763 | content: "\f219"; 1764 | } 1765 | .md-flip:before { 1766 | content: "\f21a"; 1767 | } 1768 | .md-gradient:before { 1769 | content: "\f21b"; 1770 | } 1771 | .md-grain:before { 1772 | content: "\f21c"; 1773 | } 1774 | .md-grid-off:before { 1775 | content: "\f21d"; 1776 | } 1777 | .md-grid-on:before { 1778 | content: "\f21e"; 1779 | } 1780 | .md-hdr-off:before { 1781 | content: "\f21f"; 1782 | } 1783 | .md-hdr-on:before { 1784 | content: "\f220"; 1785 | } 1786 | .md-hdr-strong:before { 1787 | content: "\f221"; 1788 | } 1789 | .md-hdr-weak:before { 1790 | content: "\f222"; 1791 | } 1792 | .md-healing:before { 1793 | content: "\f223"; 1794 | } 1795 | .md-image:before { 1796 | content: "\f224"; 1797 | } 1798 | .md-image-aspect-ratio:before { 1799 | content: "\f225"; 1800 | } 1801 | .md-iso:before { 1802 | content: "\f226"; 1803 | } 1804 | .md-landscape:before { 1805 | content: "\f227"; 1806 | } 1807 | .md-leak-add:before { 1808 | content: "\f228"; 1809 | } 1810 | .md-leak-remove:before { 1811 | content: "\f229"; 1812 | } 1813 | .md-lens:before { 1814 | content: "\f22a"; 1815 | } 1816 | .md-looks:before { 1817 | content: "\f22b"; 1818 | } 1819 | .md-looks-1:before { 1820 | content: "\f22c"; 1821 | } 1822 | .md-looks-2:before { 1823 | content: "\f22d"; 1824 | } 1825 | .md-looks-3:before { 1826 | content: "\f22e"; 1827 | } 1828 | .md-looks-4:before { 1829 | content: "\f22f"; 1830 | } 1831 | .md-looks-5:before { 1832 | content: "\f230"; 1833 | } 1834 | .md-looks-6:before { 1835 | content: "\f231"; 1836 | } 1837 | .md-loupe:before { 1838 | content: "\f232"; 1839 | } 1840 | .md-movie-creation:before { 1841 | content: "\f233"; 1842 | } 1843 | .md-nature:before { 1844 | content: "\f234"; 1845 | } 1846 | .md-nature-people:before { 1847 | content: "\f235"; 1848 | } 1849 | .md-navigate-before:before { 1850 | content: "\f236"; 1851 | } 1852 | .md-navigate-next:before { 1853 | content: "\f237"; 1854 | } 1855 | .md-palette:before { 1856 | content: "\f238"; 1857 | } 1858 | .md-panorama:before { 1859 | content: "\f239"; 1860 | } 1861 | .md-panorama-fisheye:before { 1862 | content: "\f23a"; 1863 | } 1864 | .md-panorama-horizontal:before { 1865 | content: "\f23b"; 1866 | } 1867 | .md-panorama-vertical:before { 1868 | content: "\f23c"; 1869 | } 1870 | .md-panorama-wide-angle:before { 1871 | content: "\f23d"; 1872 | } 1873 | .md-photo:before { 1874 | content: "\f23e"; 1875 | } 1876 | .md-photo-album:before { 1877 | content: "\f23f"; 1878 | } 1879 | .md-photo-camera:before { 1880 | content: "\f240"; 1881 | } 1882 | .md-photo-library:before { 1883 | content: "\f241"; 1884 | } 1885 | .md-portrait:before { 1886 | content: "\f242"; 1887 | } 1888 | .md-remove-red-eye:before { 1889 | content: "\f243"; 1890 | } 1891 | .md-rotate-left:before { 1892 | content: "\f244"; 1893 | } 1894 | .md-rotate-right:before { 1895 | content: "\f245"; 1896 | } 1897 | .md-slideshow:before { 1898 | content: "\f246"; 1899 | } 1900 | .md-straighten:before { 1901 | content: "\f247"; 1902 | } 1903 | .md-style:before { 1904 | content: "\f248"; 1905 | } 1906 | .md-switch-camera:before { 1907 | content: "\f249"; 1908 | } 1909 | .md-switch-video:before { 1910 | content: "\f24a"; 1911 | } 1912 | .md-tag-faces:before { 1913 | content: "\f24b"; 1914 | } 1915 | .md-texture:before { 1916 | content: "\f24c"; 1917 | } 1918 | .md-timelapse:before { 1919 | content: "\f24d"; 1920 | } 1921 | .md-timer:before { 1922 | content: "\f24e"; 1923 | } 1924 | .md-timer-3:before { 1925 | content: "\f24f"; 1926 | } 1927 | .md-timer-10:before { 1928 | content: "\f250"; 1929 | } 1930 | .md-timer-auto:before { 1931 | content: "\f251"; 1932 | } 1933 | .md-timer-off:before { 1934 | content: "\f252"; 1935 | } 1936 | .md-tonality:before { 1937 | content: "\f253"; 1938 | } 1939 | .md-transform:before { 1940 | content: "\f254"; 1941 | } 1942 | .md-tune:before { 1943 | content: "\f255"; 1944 | } 1945 | .md-wb-auto:before { 1946 | content: "\f256"; 1947 | } 1948 | .md-wb-cloudy:before { 1949 | content: "\f257"; 1950 | } 1951 | .md-wb-incandescent:before { 1952 | content: "\f258"; 1953 | } 1954 | .md-wb-irradescent:before { 1955 | content: "\f259"; 1956 | } 1957 | .md-wb-sunny:before { 1958 | content: "\f25a"; 1959 | } 1960 | .md-beenhere:before { 1961 | content: "\f25b"; 1962 | } 1963 | .md-directions:before { 1964 | content: "\f25c"; 1965 | } 1966 | .md-directions-bike:before { 1967 | content: "\f25d"; 1968 | } 1969 | .md-directions-bus:before { 1970 | content: "\f25e"; 1971 | } 1972 | .md-directions-car:before { 1973 | content: "\f25f"; 1974 | } 1975 | .md-directions-ferry:before { 1976 | content: "\f260"; 1977 | } 1978 | .md-directions-subway:before { 1979 | content: "\f261"; 1980 | } 1981 | .md-directions-train:before { 1982 | content: "\f262"; 1983 | } 1984 | .md-directions-transit:before { 1985 | content: "\f263"; 1986 | } 1987 | .md-directions-walk:before { 1988 | content: "\f264"; 1989 | } 1990 | .md-flight:before { 1991 | content: "\f265"; 1992 | } 1993 | .md-hotel:before { 1994 | content: "\f266"; 1995 | } 1996 | .md-layers:before { 1997 | content: "\f267"; 1998 | } 1999 | .md-layers-clear:before { 2000 | content: "\f268"; 2001 | } 2002 | .md-local-airport:before { 2003 | content: "\f269"; 2004 | } 2005 | .md-local-atm:before { 2006 | content: "\f26a"; 2007 | } 2008 | .md-local-attraction:before { 2009 | content: "\f26b"; 2010 | } 2011 | .md-local-bar:before { 2012 | content: "\f26c"; 2013 | } 2014 | .md-local-cafe:before { 2015 | content: "\f26d"; 2016 | } 2017 | .md-local-car-wash:before { 2018 | content: "\f26e"; 2019 | } 2020 | .md-local-convenience-store:before { 2021 | content: "\f26f"; 2022 | } 2023 | .md-local-drink:before { 2024 | content: "\f270"; 2025 | } 2026 | .md-local-florist:before { 2027 | content: "\f271"; 2028 | } 2029 | .md-local-gas-station:before { 2030 | content: "\f272"; 2031 | } 2032 | .md-local-grocery-store:before { 2033 | content: "\f273"; 2034 | } 2035 | .md-local-hospital:before { 2036 | content: "\f274"; 2037 | } 2038 | .md-local-hotel:before { 2039 | content: "\f275"; 2040 | } 2041 | .md-local-laundry-service:before { 2042 | content: "\f276"; 2043 | } 2044 | .md-local-library:before { 2045 | content: "\f277"; 2046 | } 2047 | .md-local-mall:before { 2048 | content: "\f278"; 2049 | } 2050 | .md-local-movies:before { 2051 | content: "\f279"; 2052 | } 2053 | .md-local-offer:before { 2054 | content: "\f27a"; 2055 | } 2056 | .md-local-parking:before { 2057 | content: "\f27b"; 2058 | } 2059 | .md-local-pharmacy:before { 2060 | content: "\f27c"; 2061 | } 2062 | .md-local-phone:before { 2063 | content: "\f27d"; 2064 | } 2065 | .md-local-pizza:before { 2066 | content: "\f27e"; 2067 | } 2068 | .md-local-play:before { 2069 | content: "\f27f"; 2070 | } 2071 | .md-local-post-office:before { 2072 | content: "\f280"; 2073 | } 2074 | .md-local-print-shop:before { 2075 | content: "\f281"; 2076 | } 2077 | .md-local-restaurant:before { 2078 | content: "\f282"; 2079 | } 2080 | .md-local-see:before { 2081 | content: "\f283"; 2082 | } 2083 | .md-local-shipping:before { 2084 | content: "\f284"; 2085 | } 2086 | .md-local-taxi:before { 2087 | content: "\f285"; 2088 | } 2089 | .md-location-history:before { 2090 | content: "\f286"; 2091 | } 2092 | .md-map:before { 2093 | content: "\f287"; 2094 | } 2095 | .md-my-location:before { 2096 | content: "\f288"; 2097 | } 2098 | .md-navigation:before { 2099 | content: "\f289"; 2100 | } 2101 | .md-pin-drop:before { 2102 | content: "\f28a"; 2103 | } 2104 | .md-place:before { 2105 | content: "\f28b"; 2106 | } 2107 | .md-rate-review:before { 2108 | content: "\f28c"; 2109 | } 2110 | .md-restaurant-menu:before { 2111 | content: "\f28d"; 2112 | } 2113 | .md-satellite:before { 2114 | content: "\f28e"; 2115 | } 2116 | .md-store-mall-directory:before { 2117 | content: "\f28f"; 2118 | } 2119 | .md-terrain:before { 2120 | content: "\f290"; 2121 | } 2122 | .md-traffic:before { 2123 | content: "\f291"; 2124 | } 2125 | .md-apps:before { 2126 | content: "\f292"; 2127 | } 2128 | .md-cancel:before { 2129 | content: "\f293"; 2130 | } 2131 | .md-arrow-drop-down-circle:before { 2132 | content: "\f294"; 2133 | } 2134 | .md-arrow-drop-down:before { 2135 | content: "\f295"; 2136 | } 2137 | .md-arrow-drop-up:before { 2138 | content: "\f296"; 2139 | } 2140 | .md-arrow-back:before { 2141 | content: "\f297"; 2142 | } 2143 | .md-arrow-forward:before { 2144 | content: "\f298"; 2145 | } 2146 | .md-check:before { 2147 | content: "\f299"; 2148 | } 2149 | .md-close:before { 2150 | content: "\f29a"; 2151 | } 2152 | .md-chevron-left:before { 2153 | content: "\f29b"; 2154 | } 2155 | .md-chevron-right:before { 2156 | content: "\f29c"; 2157 | } 2158 | .md-expand-less:before { 2159 | content: "\f29d"; 2160 | } 2161 | .md-expand-more:before { 2162 | content: "\f29e"; 2163 | } 2164 | .md-fullscreen:before { 2165 | content: "\f29f"; 2166 | } 2167 | .md-fullscreen-exit:before { 2168 | content: "\f2a0"; 2169 | } 2170 | .md-menu:before { 2171 | content: "\f2a1"; 2172 | } 2173 | .md-more-horiz:before { 2174 | content: "\f2a2"; 2175 | } 2176 | .md-more-vert:before { 2177 | content: "\f2a3"; 2178 | } 2179 | .md-refresh:before { 2180 | content: "\f2a4"; 2181 | } 2182 | .md-unfold-less:before { 2183 | content: "\f2a5"; 2184 | } 2185 | .md-unfold-more:before { 2186 | content: "\f2a6"; 2187 | } 2188 | .md-adb:before { 2189 | content: "\f2a7"; 2190 | } 2191 | .md-bluetooth-audio:before { 2192 | content: "\f2a8"; 2193 | } 2194 | .md-disc-full:before { 2195 | content: "\f2a9"; 2196 | } 2197 | .md-dnd-forwardslash:before { 2198 | content: "\f2aa"; 2199 | } 2200 | .md-do-not-disturb:before { 2201 | content: "\f2ab"; 2202 | } 2203 | .md-drive-eta:before { 2204 | content: "\f2ac"; 2205 | } 2206 | .md-event-available:before { 2207 | content: "\f2ad"; 2208 | } 2209 | .md-event-busy:before { 2210 | content: "\f2ae"; 2211 | } 2212 | .md-event-note:before { 2213 | content: "\f2af"; 2214 | } 2215 | .md-folder-special:before { 2216 | content: "\f2b0"; 2217 | } 2218 | .md-mms:before { 2219 | content: "\f2b1"; 2220 | } 2221 | .md-more:before { 2222 | content: "\f2b2"; 2223 | } 2224 | .md-network-locked:before { 2225 | content: "\f2b3"; 2226 | } 2227 | .md-phone-bluetooth-speaker:before { 2228 | content: "\f2b4"; 2229 | } 2230 | .md-phone-forwarded:before { 2231 | content: "\f2b5"; 2232 | } 2233 | .md-phone-in-talk:before { 2234 | content: "\f2b6"; 2235 | } 2236 | .md-phone-locked:before { 2237 | content: "\f2b7"; 2238 | } 2239 | .md-phone-missed:before { 2240 | content: "\f2b8"; 2241 | } 2242 | .md-phone-paused:before { 2243 | content: "\f2b9"; 2244 | } 2245 | .md-play-download:before { 2246 | content: "\f2ba"; 2247 | } 2248 | .md-play-install:before { 2249 | content: "\f2bb"; 2250 | } 2251 | .md-sd-card:before { 2252 | content: "\f2bc"; 2253 | } 2254 | .md-sim-card-alert:before { 2255 | content: "\f2bd"; 2256 | } 2257 | .md-sms:before { 2258 | content: "\f2be"; 2259 | } 2260 | .md-sms-failed:before { 2261 | content: "\f2bf"; 2262 | } 2263 | .md-sync:before { 2264 | content: "\f2c0"; 2265 | } 2266 | .md-sync-disabled:before { 2267 | content: "\f2c1"; 2268 | } 2269 | .md-sync-problem:before { 2270 | content: "\f2c2"; 2271 | } 2272 | .md-system-update:before { 2273 | content: "\f2c3"; 2274 | } 2275 | .md-tap-and-play:before { 2276 | content: "\f2c4"; 2277 | } 2278 | .md-time-to-leave:before { 2279 | content: "\f2c5"; 2280 | } 2281 | .md-vibration:before { 2282 | content: "\f2c6"; 2283 | } 2284 | .md-voice-chat:before { 2285 | content: "\f2c7"; 2286 | } 2287 | .md-vpn-lock:before { 2288 | content: "\f2c8"; 2289 | } 2290 | .md-cake:before { 2291 | content: "\f2c9"; 2292 | } 2293 | .md-domain:before { 2294 | content: "\f2ca"; 2295 | } 2296 | .md-location-city:before { 2297 | content: "\f2cb"; 2298 | } 2299 | .md-mood:before { 2300 | content: "\f2cc"; 2301 | } 2302 | .md-notifications-none:before { 2303 | content: "\f2cd"; 2304 | } 2305 | .md-notifications:before { 2306 | content: "\f2ce"; 2307 | } 2308 | .md-notifications-off:before { 2309 | content: "\f2cf"; 2310 | } 2311 | .md-notifications-on:before { 2312 | content: "\f2d0"; 2313 | } 2314 | .md-notifications-paused:before { 2315 | content: "\f2d1"; 2316 | } 2317 | .md-pages:before { 2318 | content: "\f2d2"; 2319 | } 2320 | .md-party-mode:before { 2321 | content: "\f2d3"; 2322 | } 2323 | .md-group:before { 2324 | content: "\f2d4"; 2325 | } 2326 | .md-group-add:before { 2327 | content: "\f2d5"; 2328 | } 2329 | .md-people:before { 2330 | content: "\f2d6"; 2331 | } 2332 | .md-people-outline:before { 2333 | content: "\f2d7"; 2334 | } 2335 | .md-person:before { 2336 | content: "\f2d8"; 2337 | } 2338 | .md-person-add:before { 2339 | content: "\f2d9"; 2340 | } 2341 | .md-person-outline:before { 2342 | content: "\f2da"; 2343 | } 2344 | .md-plus-one:before { 2345 | content: "\f2db"; 2346 | } 2347 | .md-poll:before { 2348 | content: "\f2dc"; 2349 | } 2350 | .md-public:before { 2351 | content: "\f2dd"; 2352 | } 2353 | .md-school:before { 2354 | content: "\f2de"; 2355 | } 2356 | .md-share:before { 2357 | content: "\f2df"; 2358 | } 2359 | .md-whatshot:before { 2360 | content: "\f2e0"; 2361 | } 2362 | .md-check-box:before { 2363 | content: "\f2e1"; 2364 | } 2365 | .md-check-box-outline-blank:before { 2366 | content: "\f2e2"; 2367 | } 2368 | .md-radio-button-off:before { 2369 | content: "\f2e3"; 2370 | } 2371 | .md-radio-button-on:before { 2372 | content: "\f2e4"; 2373 | } 2374 | .md-star:before { 2375 | content: "\f2e5"; 2376 | } 2377 | .md-star-half:before { 2378 | content: "\f2e6"; 2379 | } 2380 | .md-star-outline:before { 2381 | content: "\f2e7"; 2382 | } 2383 | -------------------------------------------------------------------------------- /_sass/sass/modules/_menu.scss: -------------------------------------------------------------------------------- 1 | /* ============================================================================= 2 | MM - MATERIAL MENU 3 | ============================================================================= */ 4 | 5 | /** 6 | * MM - Material Menu 7 | * 8 | * All the styles for the material menu here! I've prefixed them all with "mm", 9 | * which means material menu. 10 | */ 11 | 12 | /** 13 | * Toggle Button 14 | * 15 | * a.k.a. hamburger icon. See the "resets" section for global button resets. 16 | */ 17 | 18 | $menu-toggle-width: 24px; 19 | $menu-toggle-height: 18px; 20 | $menu-toggle-layer-thickness: 4px; 21 | $menu-gradient-stop-1: $menu-toggle-height/2 - $menu-toggle-layer-thickness/2; 22 | $menu-gradient-stop-2: $menu-gradient-stop-1 + $menu-toggle-layer-thickness; 23 | 24 | .mm-menu-toggle { 25 | position: fixed; 26 | top: 12px; left: 12px; 27 | z-index: 20; 28 | width: $menu-toggle-width; 29 | height: $menu-toggle-height; 30 | background: linear-gradient(0deg, rgba($color--text-primary,0), rgba($color--text-primary,0) $menu-gradient-stop-1, $color--text-primary $menu-gradient-stop-1, $color--text-primary $menu-gradient-stop-2, rgba($color--text-primary,0) $menu-gradient-stop-2, rgba($color--text-primary,0) $menu-toggle-height); 31 | font-size: 0; 32 | text-indent: -9999px; 33 | } 34 | 35 | .mm-menu-toggle::before, 36 | .mm-menu-toggle::after { 37 | display: block; 38 | position: absolute; 39 | left: 0; 40 | width: 100%; 41 | height: $menu-toggle-layer-thickness; 42 | background-color: $color--text-primary; 43 | content: ""; 44 | } 45 | 46 | .mm-menu-toggle::before { 47 | top: 0; 48 | transform-origin: bottom left; 49 | } 50 | 51 | .mm-menu-toggle::after { 52 | bottom: 0; 53 | transform-origin: top left; 54 | } 55 | 56 | .mm-menu-toggle, 57 | .mm-menu-toggle::before, 58 | .mm-menu-toggle::after { 59 | transition: all 0.5s; 60 | } 61 | 62 | /* active states */ 63 | 64 | .mm-menu-toggle.active { 65 | transform: rotate(360deg); 66 | } 67 | 68 | .mm-menu-toggle.active::before { 69 | width: 75%; 70 | transform: translateY(7px) rotate(-45deg); 71 | } 72 | 73 | .mm-menu-toggle.active::after { 74 | width: 75%; 75 | transform: translateY(-7px) rotate(45deg); 76 | } 77 | 78 | /** 79 | * The actual menu 80 | * 81 | * Here be all the stuff for the menu itself. 82 | */ 83 | 84 | .mm-menu { 85 | position: fixed; 86 | top: 0; left: 0; 87 | z-index: 10; 88 | background-color: #fff; 89 | width: 100%; 90 | height: 100%; 91 | overflow-y: auto; 92 | box-shadow: 0; 93 | transform: translateX(-100%); 94 | transition: transform 0.5s, box-shadow 0.5s; 95 | } 96 | 97 | .mm-menu.active { 98 | box-shadow: 0 2px 8px rgba(0,0,0,0.2); 99 | transform: translateX(0); 100 | } 101 | 102 | @media all and ( min-width: 300px ) { 103 | .mm-menu { 104 | width: 300px; 105 | transform: translateX(-300px); 106 | } 107 | } 108 | 109 | /* header */ 110 | 111 | .mm-menu__header { 112 | position: relative; 113 | width: 100%; 114 | height: 188px; 115 | background-color: $color--accent; 116 | } 117 | 118 | .mm-menu__title { 119 | position: absolute; 120 | bottom: 12px; left: 12px; 121 | margin: 0; 122 | padding: 0; 123 | color: #fff; 124 | font-size: $font-size--medium; 125 | } 126 | 127 | /* list */ 128 | 129 | .mm-menu__items { 130 | list-style: none; 131 | margin: 0; 132 | padding: 0; 133 | } 134 | 135 | .mm-menu__item { 136 | display: block; 137 | width: 100%; 138 | opacity: 0; 139 | transform: translateX(-50%); 140 | } 141 | 142 | .mm-menu__item.in-view { 143 | opacity: 1; 144 | transform: translateX(0); 145 | } 146 | 147 | $delay: 0.1; 148 | @for $i from 1 through 20 { 149 | .mm-menu__item.item-#{$i} { 150 | transition: opacity 0.5s #{$delay}s, transform 0.5s #{$delay}s; 151 | } 152 | $delay: $delay + 0.1; 153 | } 154 | 155 | .mm-menu__link { 156 | display: block; 157 | position: relative; 158 | overflow: hidden; 159 | margin: 4px 0; 160 | padding: 12px; 161 | color: $color--text-secondary; 162 | font-size: $font-size--small; 163 | text-decoration: none; 164 | transition: background 0.5s, color 0.5s; 165 | } 166 | 167 | .mm-menu__link-text { 168 | position: relative; 169 | z-index: 2; 170 | } 171 | 172 | /* the touch effect, for when a link is touched */ 173 | 174 | .mm-menu__link--touch-effect { 175 | display: block; 176 | position: absolute; 177 | z-index: 1; 178 | width: 0; height: 0; 179 | border-radius: 100%; 180 | background-color: $color--divider; 181 | transform: scale(0); 182 | transform-origin: 50% 50%; 183 | } 184 | 185 | .mm-menu__link--touch-effect.animating { 186 | transform: scale(1); 187 | transition: transform 0.5s; 188 | } 189 | 190 | /** 191 | * Menu mask 192 | * 193 | * A mask that comes in and covers the wrapper when the menu is active. 194 | */ 195 | 196 | .mm-menu-mask { 197 | display: block; 198 | position: fixed; 199 | top: 0; left: 0; 200 | z-index: 8; 201 | width: 100%; 202 | height: 100%; 203 | background-color: rgba(0,0,0,0.8); 204 | visibility: hidden; 205 | opacity: 0; 206 | transition: opacity 0.5s, visibility 0.5s; 207 | } 208 | 209 | .mm-menu-mask.active { 210 | visibility: visible; 211 | opacity: 1; 212 | } -------------------------------------------------------------------------------- /_sass/sass/style.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | Title: TITLE 3 | Author: Nick Salloum 4 | Author URI: http://callmenick.com/ 5 | Description: My theme 6 | Version: 0.1.0 7 | */ 8 | 9 | // ============================================================================= 10 | // CONFIG 11 | // ============================================================================= 12 | 13 | @import "config/variables"; 14 | @import "config/mixins"; 15 | 16 | // ============================================================================= 17 | // BASE 18 | // ============================================================================= 19 | 20 | @import "base/reset"; 21 | @import "base/base"; 22 | 23 | // ============================================================================= 24 | // LAYOUTS 25 | // ============================================================================= 26 | 27 | @import "layouts/primary"; 28 | 29 | // ============================================================================= 30 | // MODULES 31 | // ============================================================================= 32 | 33 | @import "modules/menu"; 34 | @import "modules/icons"; 35 | 36 | // ============================================================================= 37 | // FUSION AD 38 | // ============================================================================= 39 | 40 | @import "modules/fusionad"; -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | /*! 2 | Title: TITLE 3 | Author: Nick Salloum 4 | Author URI: http://callmenick.com/ 5 | Description: My theme 6 | Version: 0.1.0 7 | */ 8 | /* ============================================================================= 9 | RESET 10 | ============================================================================= */ 11 | html, 12 | body, 13 | div, 14 | span, 15 | h1, 16 | h2, 17 | h3, 18 | h4, 19 | h5, 20 | h6, 21 | p, 22 | a, 23 | em, 24 | img, 25 | small, 26 | strong, 27 | ol, 28 | ul, 29 | li, 30 | article, 31 | aside, 32 | figure, 33 | figcaption, 34 | footer, 35 | header, 36 | nav, 37 | section { 38 | margin: 0; 39 | padding: 0; 40 | border: 0; 41 | font-size: 100%; 42 | font: inherit; 43 | vertical-align: baseline; 44 | } 45 | 46 | article, 47 | aside, 48 | figcaption, 49 | figure, 50 | footer, 51 | header, 52 | main, 53 | nav, 54 | section { 55 | display: block; 56 | } 57 | 58 | ol, 59 | ul { 60 | list-style: none; 61 | margin: 0; 62 | padding: 0; 63 | } 64 | 65 | /* ============================================================================= 66 | BUTTON RESETS 67 | ============================================================================= */ 68 | button { 69 | margin: 0; 70 | padding: 0; 71 | color: inherit; 72 | font-family: inherit; 73 | font-size: inherit; 74 | background: none; 75 | border: none; 76 | border-radius: none; 77 | box-shadow: none; 78 | -webkit-appearance: none; 79 | -moz-appearance: none; 80 | appearance: none; 81 | outline: none; 82 | cursor: pointer; 83 | } 84 | 85 | /* ============================================================================= 86 | BOX SIZING AND CLEARFIX 87 | ============================================================================= */ 88 | *, 89 | *::before, 90 | *::after { 91 | box-sizing: border-box; 92 | } 93 | 94 | .clearfix::after { 95 | content: ""; 96 | display: table; 97 | clear: both; 98 | } 99 | 100 | /* ============================================================================= 101 | HTML & BODY 102 | ============================================================================= */ 103 | body { 104 | color: #727272; 105 | background-color: #fff; 106 | font-family: "Roboto", sans-serif; 107 | font-size: 16px; 108 | font-weight: 300; 109 | line-height: 1.6; 110 | } 111 | 112 | body.mm-menu-open { 113 | overflow: hidden; 114 | } 115 | 116 | /* ============================================================================= 117 | HEADINGS 118 | ============================================================================= */ 119 | h1, 120 | h2, 121 | h3, 122 | h4, 123 | h5, 124 | h6 { 125 | margin-bottom: 22px; 126 | color: #212121; 127 | line-height: 1; 128 | } 129 | 130 | h1 { 131 | font-size: 36px; 132 | } 133 | 134 | h2 { 135 | font-size: 22px; 136 | } 137 | 138 | /* ============================================================================= 139 | TEXT 140 | ============================================================================= */ 141 | p { 142 | margin-bottom: 22px; 143 | } 144 | 145 | p:last-child { 146 | margin-bottom: 0; 147 | } 148 | 149 | a { 150 | color: #CDDC39; 151 | text-decoration: none; 152 | } 153 | 154 | /* ============================================================================= 155 | PRIMARY LAYOUT 156 | ============================================================================= */ 157 | .wrapper { 158 | z-index: 5; 159 | -webkit-transition: -webkit-transform 0.5s; 160 | transition: transform 0.5s; 161 | } 162 | 163 | .wrapper.mm-menu-open { 164 | -webkit-transform: translateX(300px); 165 | -ms-transform: translateX(300px); 166 | transform: translateX(300px); 167 | } 168 | 169 | .container { 170 | padding: 0 72px; 171 | } 172 | 173 | main { 174 | padding: 36px 0; 175 | } 176 | 177 | section { 178 | margin-bottom: 36px; 179 | } 180 | 181 | /* ============================================================================= 182 | HEADER 183 | ============================================================================= */ 184 | .header { 185 | padding: 24px 0; 186 | text-align: center; 187 | } 188 | 189 | .header__title { 190 | margin: 0; 191 | } 192 | 193 | /* ============================================================================= 194 | MM - MATERIAL MENU 195 | ============================================================================= */ 196 | /** 197 | * MM - Material Menu 198 | * 199 | * All the styles for the material menu here! I've prefixed them all with "mm", 200 | * which means material menu. 201 | */ 202 | /** 203 | * Toggle Button 204 | * 205 | * a.k.a. hamburger icon. See the "resets" section for global button resets. 206 | */ 207 | .mm-menu-toggle { 208 | position: fixed; 209 | top: 12px; 210 | left: 12px; 211 | z-index: 20; 212 | width: 24px; 213 | height: 18px; 214 | background: -webkit-linear-gradient(90deg, rgba(33, 33, 33, 0), rgba(33, 33, 33, 0) 7px, #212121 7px, #212121 11px, rgba(33, 33, 33, 0) 11px, rgba(33, 33, 33, 0) 18px); 215 | background: linear-gradient(0deg, rgba(33, 33, 33, 0), rgba(33, 33, 33, 0) 7px, #212121 7px, #212121 11px, rgba(33, 33, 33, 0) 11px, rgba(33, 33, 33, 0) 18px); 216 | font-size: 0; 217 | text-indent: -9999px; 218 | } 219 | 220 | .mm-menu-toggle::before, 221 | .mm-menu-toggle::after { 222 | display: block; 223 | position: absolute; 224 | left: 0; 225 | width: 100%; 226 | height: 4px; 227 | background-color: #212121; 228 | content: ""; 229 | } 230 | 231 | .mm-menu-toggle::before { 232 | top: 0; 233 | -webkit-transform-origin: bottom left; 234 | -ms-transform-origin: bottom left; 235 | transform-origin: bottom left; 236 | } 237 | 238 | .mm-menu-toggle::after { 239 | bottom: 0; 240 | -webkit-transform-origin: top left; 241 | -ms-transform-origin: top left; 242 | transform-origin: top left; 243 | } 244 | 245 | .mm-menu-toggle, 246 | .mm-menu-toggle::before, 247 | .mm-menu-toggle::after { 248 | -webkit-transition: all 0.5s; 249 | transition: all 0.5s; 250 | } 251 | 252 | /* active states */ 253 | .mm-menu-toggle.active { 254 | -webkit-transform: rotate(360deg); 255 | -ms-transform: rotate(360deg); 256 | transform: rotate(360deg); 257 | } 258 | 259 | .mm-menu-toggle.active::before { 260 | width: 75%; 261 | -webkit-transform: translateY(7px) rotate(-45deg); 262 | -ms-transform: translateY(7px) rotate(-45deg); 263 | transform: translateY(7px) rotate(-45deg); 264 | } 265 | 266 | .mm-menu-toggle.active::after { 267 | width: 75%; 268 | -webkit-transform: translateY(-7px) rotate(45deg); 269 | -ms-transform: translateY(-7px) rotate(45deg); 270 | transform: translateY(-7px) rotate(45deg); 271 | } 272 | 273 | /** 274 | * The actual menu 275 | * 276 | * Here be all the stuff for the menu itself. 277 | */ 278 | .mm-menu { 279 | position: fixed; 280 | top: 0; 281 | left: 0; 282 | z-index: 10; 283 | background-color: #fff; 284 | width: 100%; 285 | height: 100%; 286 | overflow-y: auto; 287 | box-shadow: 0; 288 | -webkit-transform: translateX(-100%); 289 | -ms-transform: translateX(-100%); 290 | transform: translateX(-100%); 291 | -webkit-transition: -webkit-transform 0.5s, box-shadow 0.5s; 292 | transition: transform 0.5s, box-shadow 0.5s; 293 | } 294 | 295 | .mm-menu.active { 296 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); 297 | -webkit-transform: translateX(0); 298 | -ms-transform: translateX(0); 299 | transform: translateX(0); 300 | } 301 | 302 | @media all and (min-width: 300px) { 303 | .mm-menu { 304 | width: 300px; 305 | -webkit-transform: translateX(-300px); 306 | -ms-transform: translateX(-300px); 307 | transform: translateX(-300px); 308 | } 309 | } 310 | /* header */ 311 | .mm-menu__header { 312 | position: relative; 313 | width: 100%; 314 | height: 188px; 315 | background-color: #CDDC39; 316 | } 317 | 318 | .mm-menu__title { 319 | position: absolute; 320 | bottom: 12px; 321 | left: 12px; 322 | margin: 0; 323 | padding: 0; 324 | color: #fff; 325 | font-size: 22px; 326 | } 327 | 328 | /* list */ 329 | .mm-menu__items { 330 | list-style: none; 331 | margin: 0; 332 | padding: 0; 333 | } 334 | 335 | .mm-menu__item { 336 | display: block; 337 | width: 100%; 338 | opacity: 0; 339 | -webkit-transform: translateX(-50%); 340 | -ms-transform: translateX(-50%); 341 | transform: translateX(-50%); 342 | } 343 | 344 | .mm-menu__item.in-view { 345 | opacity: 1; 346 | -webkit-transform: translateX(0); 347 | -ms-transform: translateX(0); 348 | transform: translateX(0); 349 | } 350 | 351 | .mm-menu__item.item-1 { 352 | -webkit-transition: opacity 0.5s 0.1s, -webkit-transform 0.5s 0.1s; 353 | transition: opacity 0.5s 0.1s, transform 0.5s 0.1s; 354 | } 355 | 356 | .mm-menu__item.item-2 { 357 | -webkit-transition: opacity 0.5s 0.2s, -webkit-transform 0.5s 0.2s; 358 | transition: opacity 0.5s 0.2s, transform 0.5s 0.2s; 359 | } 360 | 361 | .mm-menu__item.item-3 { 362 | -webkit-transition: opacity 0.5s 0.3s, -webkit-transform 0.5s 0.3s; 363 | transition: opacity 0.5s 0.3s, transform 0.5s 0.3s; 364 | } 365 | 366 | .mm-menu__item.item-4 { 367 | -webkit-transition: opacity 0.5s 0.4s, -webkit-transform 0.5s 0.4s; 368 | transition: opacity 0.5s 0.4s, transform 0.5s 0.4s; 369 | } 370 | 371 | .mm-menu__item.item-5 { 372 | -webkit-transition: opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s; 373 | transition: opacity 0.5s 0.5s, transform 0.5s 0.5s; 374 | } 375 | 376 | .mm-menu__item.item-6 { 377 | -webkit-transition: opacity 0.5s 0.6s, -webkit-transform 0.5s 0.6s; 378 | transition: opacity 0.5s 0.6s, transform 0.5s 0.6s; 379 | } 380 | 381 | .mm-menu__item.item-7 { 382 | -webkit-transition: opacity 0.5s 0.7s, -webkit-transform 0.5s 0.7s; 383 | transition: opacity 0.5s 0.7s, transform 0.5s 0.7s; 384 | } 385 | 386 | .mm-menu__item.item-8 { 387 | -webkit-transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s; 388 | transition: opacity 0.5s 0.8s, transform 0.5s 0.8s; 389 | } 390 | 391 | .mm-menu__item.item-9 { 392 | -webkit-transition: opacity 0.5s 0.9s, -webkit-transform 0.5s 0.9s; 393 | transition: opacity 0.5s 0.9s, transform 0.5s 0.9s; 394 | } 395 | 396 | .mm-menu__item.item-10 { 397 | -webkit-transition: opacity 0.5s 1.0s, -webkit-transform 0.5s 1.0s; 398 | transition: opacity 0.5s 1.0s, transform 0.5s 1.0s; 399 | } 400 | 401 | .mm-menu__item.item-11 { 402 | -webkit-transition: opacity 0.5s 1.1s, -webkit-transform 0.5s 1.1s; 403 | transition: opacity 0.5s 1.1s, transform 0.5s 1.1s; 404 | } 405 | 406 | .mm-menu__item.item-12 { 407 | -webkit-transition: opacity 0.5s 1.2s, -webkit-transform 0.5s 1.2s; 408 | transition: opacity 0.5s 1.2s, transform 0.5s 1.2s; 409 | } 410 | 411 | .mm-menu__item.item-13 { 412 | -webkit-transition: opacity 0.5s 1.3s, -webkit-transform 0.5s 1.3s; 413 | transition: opacity 0.5s 1.3s, transform 0.5s 1.3s; 414 | } 415 | 416 | .mm-menu__item.item-14 { 417 | -webkit-transition: opacity 0.5s 1.4s, -webkit-transform 0.5s 1.4s; 418 | transition: opacity 0.5s 1.4s, transform 0.5s 1.4s; 419 | } 420 | 421 | .mm-menu__item.item-15 { 422 | -webkit-transition: opacity 0.5s 1.5s, -webkit-transform 0.5s 1.5s; 423 | transition: opacity 0.5s 1.5s, transform 0.5s 1.5s; 424 | } 425 | 426 | .mm-menu__item.item-16 { 427 | -webkit-transition: opacity 0.5s 1.6s, -webkit-transform 0.5s 1.6s; 428 | transition: opacity 0.5s 1.6s, transform 0.5s 1.6s; 429 | } 430 | 431 | .mm-menu__item.item-17 { 432 | -webkit-transition: opacity 0.5s 1.7s, -webkit-transform 0.5s 1.7s; 433 | transition: opacity 0.5s 1.7s, transform 0.5s 1.7s; 434 | } 435 | 436 | .mm-menu__item.item-18 { 437 | -webkit-transition: opacity 0.5s 1.8s, -webkit-transform 0.5s 1.8s; 438 | transition: opacity 0.5s 1.8s, transform 0.5s 1.8s; 439 | } 440 | 441 | .mm-menu__item.item-19 { 442 | -webkit-transition: opacity 0.5s 1.9s, -webkit-transform 0.5s 1.9s; 443 | transition: opacity 0.5s 1.9s, transform 0.5s 1.9s; 444 | } 445 | 446 | .mm-menu__item.item-20 { 447 | -webkit-transition: opacity 0.5s 2.0s, -webkit-transform 0.5s 2.0s; 448 | transition: opacity 0.5s 2.0s, transform 0.5s 2.0s; 449 | } 450 | 451 | .mm-menu__link { 452 | display: block; 453 | position: relative; 454 | overflow: hidden; 455 | margin: 4px 0; 456 | padding: 12px; 457 | color: #727272; 458 | font-size: 16px; 459 | text-decoration: none; 460 | -webkit-transition: background 0.5s, color 0.5s; 461 | transition: background 0.5s, color 0.5s; 462 | } 463 | 464 | .mm-menu__link-text { 465 | position: relative; 466 | z-index: 2; 467 | } 468 | 469 | /* the touch effect, for when a link is touched */ 470 | .mm-menu__link--touch-effect { 471 | display: block; 472 | position: absolute; 473 | z-index: 1; 474 | width: 0; 475 | height: 0; 476 | border-radius: 100%; 477 | background-color: #B6B6B6; 478 | -webkit-transform: scale(0); 479 | -ms-transform: scale(0); 480 | transform: scale(0); 481 | -webkit-transform-origin: 50% 50%; 482 | -ms-transform-origin: 50% 50%; 483 | transform-origin: 50% 50%; 484 | } 485 | 486 | .mm-menu__link--touch-effect.animating { 487 | -webkit-transform: scale(1); 488 | -ms-transform: scale(1); 489 | transform: scale(1); 490 | -webkit-transition: -webkit-transform 0.5s; 491 | transition: transform 0.5s; 492 | } 493 | 494 | /** 495 | * Menu mask 496 | * 497 | * A mask that comes in and covers the wrapper when the menu is active. 498 | */ 499 | .mm-menu-mask { 500 | display: block; 501 | position: fixed; 502 | top: 0; 503 | left: 0; 504 | z-index: 8; 505 | width: 100%; 506 | height: 100%; 507 | background-color: rgba(0, 0, 0, 0.8); 508 | visibility: hidden; 509 | opacity: 0; 510 | -webkit-transition: opacity 0.5s, visibility 0.5s; 511 | transition: opacity 0.5s, visibility 0.5s; 512 | } 513 | 514 | .mm-menu-mask.active { 515 | visibility: visible; 516 | opacity: 1; 517 | } 518 | 519 | /*! 520 | * Material Design Iconic Font 1.0.1 by Sergey Kupletsky (@zavoloklom) - http://zavoloklom.github.io/material-design-iconic-font/ 521 | * License - https://github.com/zavoloklom/material-design-iconic-font/blob/gh-pages/License.md (Attribution-ShareAlike 4.0 International license) 522 | */ 523 | @font-face { 524 | font-family: 'Material Design Iconic Font'; 525 | src: url("../fonts/Material-Design-Iconic-Font.eot?v=1.0.1"); 526 | src: url("../fonts/Material-Design-Iconic-Font.eot?#iefix&v=1.0.1") format("embedded-opentype"), url("../fonts/Material-Design-Iconic-Font.woff?v=1.0.1") format("woff"), url("../fonts/Material-Design-Iconic-Font.ttf?v=1.0.1") format("truetype"), url("../fonts/Material-Design-Iconic-Font.svg?v=1.0.1#Material-Design-Iconic-Font") format("svg"); 527 | font-weight: normal; 528 | font-style: normal; 529 | } 530 | [class^="md-"], 531 | [class*=" md-"] { 532 | display: inline-block; 533 | font: normal normal normal 14px/1 'Material Design Iconic Font'; 534 | font-size: inherit; 535 | speak: none; 536 | text-rendering: auto; 537 | -webkit-font-smoothing: antialiased; 538 | -moz-osx-font-smoothing: grayscale; 539 | } 540 | 541 | .md { 542 | line-height: inherit; 543 | vertical-align: bottom; 544 | } 545 | 546 | .md-lg { 547 | font-size: 1.5em; 548 | line-height: .5em; 549 | vertical-align: -35%; 550 | } 551 | 552 | .md-2x { 553 | font-size: 2em; 554 | } 555 | 556 | .md-3x { 557 | font-size: 3em; 558 | } 559 | 560 | .md-4x { 561 | font-size: 4em; 562 | } 563 | 564 | .md-5x { 565 | font-size: 5em; 566 | } 567 | 568 | .md-border { 569 | padding: .2em .25em .15em; 570 | border: solid 0.08em #808080; 571 | border-radius: .1em; 572 | } 573 | 574 | .md-border-circle { 575 | padding: .2em .25em .15em; 576 | border: solid 0.08em #808080; 577 | border-radius: 50%; 578 | } 579 | 580 | [class^="md-"].pull-left, 581 | [class*=" md-"].pull-left { 582 | float: left; 583 | margin-right: .3em; 584 | } 585 | 586 | [class^="md-"].pull-right, 587 | [class*=" md-"].pull-right { 588 | float: right; 589 | margin-left: .3em; 590 | } 591 | 592 | .md-spin { 593 | -webkit-animation: md-spin 1.5s infinite linear; 594 | animation: md-spin 1.5s infinite linear; 595 | } 596 | 597 | .md-spin-reverse { 598 | -webkit-animation: md-spin-reverse 1.5s infinite linear; 599 | animation: md-spin-reverse 1.5s infinite linear; 600 | } 601 | 602 | @-webkit-keyframes md-spin { 603 | 0% { 604 | -webkit-transform: rotate(0deg); 605 | transform: rotate(0deg); 606 | } 607 | 100% { 608 | -webkit-transform: rotate(359deg); 609 | transform: rotate(359deg); 610 | } 611 | } 612 | @keyframes md-spin { 613 | 0% { 614 | -webkit-transform: rotate(0deg); 615 | transform: rotate(0deg); 616 | } 617 | 100% { 618 | -webkit-transform: rotate(359deg); 619 | transform: rotate(359deg); 620 | } 621 | } 622 | @-webkit-keyframes md-spin-reverse { 623 | 0% { 624 | -webkit-transform: rotate(0deg); 625 | transform: rotate(0deg); 626 | } 627 | 100% { 628 | -webkit-transform: rotate(-359deg); 629 | transform: rotate(-359deg); 630 | } 631 | } 632 | @keyframes md-spin-reverse { 633 | 0% { 634 | -webkit-transform: rotate(0deg); 635 | transform: rotate(0deg); 636 | } 637 | 100% { 638 | -webkit-transform: rotate(-359deg); 639 | transform: rotate(-359deg); 640 | } 641 | } 642 | .md-rotate-90 { 643 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 644 | -webkit-transform: rotate(90deg); 645 | -ms-transform: rotate(90deg); 646 | transform: rotate(90deg); 647 | } 648 | 649 | .md-rotate-180 { 650 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 651 | -webkit-transform: rotate(180deg); 652 | -ms-transform: rotate(180deg); 653 | transform: rotate(180deg); 654 | } 655 | 656 | .md-rotate-270 { 657 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 658 | -webkit-transform: rotate(270deg); 659 | -ms-transform: rotate(270deg); 660 | transform: rotate(270deg); 661 | } 662 | 663 | .md-flip-horizontal { 664 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1); 665 | -webkit-transform: scale(-1, 1); 666 | -ms-transform: scale(-1, 1); 667 | transform: scale(-1, 1); 668 | } 669 | 670 | .md-flip-vertical { 671 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1); 672 | -webkit-transform: scale(1, -1); 673 | -ms-transform: scale(1, -1); 674 | transform: scale(1, -1); 675 | } 676 | 677 | :root .md-rotate-90, 678 | :root .md-rotate-180, 679 | :root .md-rotate-270, 680 | :root .md-flip-horizontal, 681 | :root .md-flip-vertical { 682 | -webkit-filter: none; 683 | filter: none; 684 | } 685 | 686 | /* Material Design Iconic Font uses the Unicode Private Use Area (PUA) to ensure screen 687 | readers do not read off random characters that represent icons */ 688 | /* If you do not want use all icons you can disable icon set here */ 689 | .md-3d-rotation:before { 690 | content: "\f000"; 691 | } 692 | 693 | .md-accessibility:before { 694 | content: "\f001"; 695 | } 696 | 697 | .md-account-balance:before { 698 | content: "\f002"; 699 | } 700 | 701 | .md-account-balance-wallet:before { 702 | content: "\f003"; 703 | } 704 | 705 | .md-account-box:before { 706 | content: "\f004"; 707 | } 708 | 709 | .md-account-child:before { 710 | content: "\f005"; 711 | } 712 | 713 | .md-account-circle:before { 714 | content: "\f006"; 715 | } 716 | 717 | .md-add-shopping-cart:before { 718 | content: "\f007"; 719 | } 720 | 721 | .md-alarm:before { 722 | content: "\f008"; 723 | } 724 | 725 | .md-alarm-add:before { 726 | content: "\f009"; 727 | } 728 | 729 | .md-alarm-off:before { 730 | content: "\f00a"; 731 | } 732 | 733 | .md-alarm-on:before { 734 | content: "\f00b"; 735 | } 736 | 737 | .md-android:before { 738 | content: "\f00c"; 739 | } 740 | 741 | .md-announcement:before { 742 | content: "\f00d"; 743 | } 744 | 745 | .md-aspect-ratio:before { 746 | content: "\f00e"; 747 | } 748 | 749 | .md-assessment:before { 750 | content: "\f00f"; 751 | } 752 | 753 | .md-assignment:before { 754 | content: "\f010"; 755 | } 756 | 757 | .md-assignment-ind:before { 758 | content: "\f011"; 759 | } 760 | 761 | .md-assignment-late:before { 762 | content: "\f012"; 763 | } 764 | 765 | .md-assignment-return:before { 766 | content: "\f013"; 767 | } 768 | 769 | .md-assignment-returned:before { 770 | content: "\f014"; 771 | } 772 | 773 | .md-assignment-turned-in:before { 774 | content: "\f015"; 775 | } 776 | 777 | .md-autorenew:before { 778 | content: "\f016"; 779 | } 780 | 781 | .md-backup:before { 782 | content: "\f017"; 783 | } 784 | 785 | .md-book:before { 786 | content: "\f018"; 787 | } 788 | 789 | .md-bookmark:before { 790 | content: "\f019"; 791 | } 792 | 793 | .md-bookmark-outline:before { 794 | content: "\f01a"; 795 | } 796 | 797 | .md-bug-report:before { 798 | content: "\f01b"; 799 | } 800 | 801 | .md-cached:before { 802 | content: "\f01c"; 803 | } 804 | 805 | .md-class:before { 806 | content: "\f01d"; 807 | } 808 | 809 | .md-credit-card:before { 810 | content: "\f01e"; 811 | } 812 | 813 | .md-dashboard:before { 814 | content: "\f01f"; 815 | } 816 | 817 | .md-delete:before { 818 | content: "\f020"; 819 | } 820 | 821 | .md-description:before { 822 | content: "\f021"; 823 | } 824 | 825 | .md-dns:before { 826 | content: "\f022"; 827 | } 828 | 829 | .md-done:before { 830 | content: "\f023"; 831 | } 832 | 833 | .md-done-all:before { 834 | content: "\f024"; 835 | } 836 | 837 | .md-event:before { 838 | content: "\f025"; 839 | } 840 | 841 | .md-exit-to-app:before { 842 | content: "\f026"; 843 | } 844 | 845 | .md-explore:before { 846 | content: "\f027"; 847 | } 848 | 849 | .md-extension:before { 850 | content: "\f028"; 851 | } 852 | 853 | .md-face-unlock:before { 854 | content: "\f029"; 855 | } 856 | 857 | .md-favorite:before { 858 | content: "\f02a"; 859 | } 860 | 861 | .md-favorite-outline:before { 862 | content: "\f02b"; 863 | } 864 | 865 | .md-find-in-page:before { 866 | content: "\f02c"; 867 | } 868 | 869 | .md-find-replace:before { 870 | content: "\f02d"; 871 | } 872 | 873 | .md-flip-to-back:before { 874 | content: "\f02e"; 875 | } 876 | 877 | .md-flip-to-front:before { 878 | content: "\f02f"; 879 | } 880 | 881 | .md-get-app:before { 882 | content: "\f030"; 883 | } 884 | 885 | .md-grade:before { 886 | content: "\f031"; 887 | } 888 | 889 | .md-group-work:before { 890 | content: "\f032"; 891 | } 892 | 893 | .md-help:before { 894 | content: "\f033"; 895 | } 896 | 897 | .md-highlight-remove:before { 898 | content: "\f034"; 899 | } 900 | 901 | .md-history:before { 902 | content: "\f035"; 903 | } 904 | 905 | .md-home:before { 906 | content: "\f036"; 907 | } 908 | 909 | .md-https:before { 910 | content: "\f037"; 911 | } 912 | 913 | .md-info:before { 914 | content: "\f038"; 915 | } 916 | 917 | .md-info-outline:before { 918 | content: "\f039"; 919 | } 920 | 921 | .md-input:before { 922 | content: "\f03a"; 923 | } 924 | 925 | .md-invert-colors:before { 926 | content: "\f03b"; 927 | } 928 | 929 | .md-label:before { 930 | content: "\f03c"; 931 | } 932 | 933 | .md-label-outline:before { 934 | content: "\f03d"; 935 | } 936 | 937 | .md-language:before { 938 | content: "\f03e"; 939 | } 940 | 941 | .md-launch:before { 942 | content: "\f03f"; 943 | } 944 | 945 | .md-list:before { 946 | content: "\f040"; 947 | } 948 | 949 | .md-lock:before { 950 | content: "\f041"; 951 | } 952 | 953 | .md-lock-open:before { 954 | content: "\f042"; 955 | } 956 | 957 | .md-lock-outline:before { 958 | content: "\f043"; 959 | } 960 | 961 | .md-loyalty:before { 962 | content: "\f044"; 963 | } 964 | 965 | .md-markunread-mailbox:before { 966 | content: "\f045"; 967 | } 968 | 969 | .md-note-add:before { 970 | content: "\f046"; 971 | } 972 | 973 | .md-open-in-browser:before { 974 | content: "\f047"; 975 | } 976 | 977 | .md-open-in-new:before { 978 | content: "\f048"; 979 | } 980 | 981 | .md-open-with:before { 982 | content: "\f049"; 983 | } 984 | 985 | .md-pageview:before { 986 | content: "\f04a"; 987 | } 988 | 989 | .md-payment:before { 990 | content: "\f04b"; 991 | } 992 | 993 | .md-perm-camera-mic:before { 994 | content: "\f04c"; 995 | } 996 | 997 | .md-perm-contact-cal:before { 998 | content: "\f04d"; 999 | } 1000 | 1001 | .md-perm-data-setting:before { 1002 | content: "\f04e"; 1003 | } 1004 | 1005 | .md-perm-device-info:before { 1006 | content: "\f04f"; 1007 | } 1008 | 1009 | .md-perm-identity:before { 1010 | content: "\f050"; 1011 | } 1012 | 1013 | .md-perm-media:before { 1014 | content: "\f051"; 1015 | } 1016 | 1017 | .md-perm-phone-msg:before { 1018 | content: "\f052"; 1019 | } 1020 | 1021 | .md-perm-scan-wifi:before { 1022 | content: "\f053"; 1023 | } 1024 | 1025 | .md-picture-in-picture:before { 1026 | content: "\f054"; 1027 | } 1028 | 1029 | .md-polymer:before { 1030 | content: "\f055"; 1031 | } 1032 | 1033 | .md-print:before { 1034 | content: "\f056"; 1035 | } 1036 | 1037 | .md-query-builder:before { 1038 | content: "\f057"; 1039 | } 1040 | 1041 | .md-question-answer:before { 1042 | content: "\f058"; 1043 | } 1044 | 1045 | .md-receipt:before { 1046 | content: "\f059"; 1047 | } 1048 | 1049 | .md-redeem:before { 1050 | content: "\f05a"; 1051 | } 1052 | 1053 | .md-report-problem:before { 1054 | content: "\f05b"; 1055 | } 1056 | 1057 | .md-restore:before { 1058 | content: "\f05c"; 1059 | } 1060 | 1061 | .md-room:before { 1062 | content: "\f05d"; 1063 | } 1064 | 1065 | .md-schedule:before { 1066 | content: "\f05e"; 1067 | } 1068 | 1069 | .md-search:before { 1070 | content: "\f05f"; 1071 | } 1072 | 1073 | .md-settings:before { 1074 | content: "\f060"; 1075 | } 1076 | 1077 | .md-settings-applications:before { 1078 | content: "\f061"; 1079 | } 1080 | 1081 | .md-settings-backup-restore:before { 1082 | content: "\f062"; 1083 | } 1084 | 1085 | .md-settings-bluetooth:before { 1086 | content: "\f063"; 1087 | } 1088 | 1089 | .md-settings-cell:before { 1090 | content: "\f064"; 1091 | } 1092 | 1093 | .md-settings-display:before { 1094 | content: "\f065"; 1095 | } 1096 | 1097 | .md-settings-ethernet:before { 1098 | content: "\f066"; 1099 | } 1100 | 1101 | .md-settings-input-antenna:before { 1102 | content: "\f067"; 1103 | } 1104 | 1105 | .md-settings-input-component:before { 1106 | content: "\f068"; 1107 | } 1108 | 1109 | .md-settings-input-composite:before { 1110 | content: "\f069"; 1111 | } 1112 | 1113 | .md-settings-input-hdmi:before { 1114 | content: "\f06a"; 1115 | } 1116 | 1117 | .md-settings-input-svideo:before { 1118 | content: "\f06b"; 1119 | } 1120 | 1121 | .md-settings-overscan:before { 1122 | content: "\f06c"; 1123 | } 1124 | 1125 | .md-settings-phone:before { 1126 | content: "\f06d"; 1127 | } 1128 | 1129 | .md-settings-power:before { 1130 | content: "\f06e"; 1131 | } 1132 | 1133 | .md-settings-remote:before { 1134 | content: "\f06f"; 1135 | } 1136 | 1137 | .md-settings-voice:before { 1138 | content: "\f070"; 1139 | } 1140 | 1141 | .md-shop:before { 1142 | content: "\f071"; 1143 | } 1144 | 1145 | .md-shopping-basket:before { 1146 | content: "\f072"; 1147 | } 1148 | 1149 | .md-shopping-cart:before { 1150 | content: "\f073"; 1151 | } 1152 | 1153 | .md-shop-two:before { 1154 | content: "\f074"; 1155 | } 1156 | 1157 | .md-speaker-notes:before { 1158 | content: "\f075"; 1159 | } 1160 | 1161 | .md-spellcheck:before { 1162 | content: "\f076"; 1163 | } 1164 | 1165 | .md-star-rate:before { 1166 | content: "\f077"; 1167 | } 1168 | 1169 | .md-stars:before { 1170 | content: "\f078"; 1171 | } 1172 | 1173 | .md-store:before { 1174 | content: "\f079"; 1175 | } 1176 | 1177 | .md-subject:before { 1178 | content: "\f07a"; 1179 | } 1180 | 1181 | .md-swap-horiz:before { 1182 | content: "\f07b"; 1183 | } 1184 | 1185 | .md-swap-vert:before { 1186 | content: "\f07c"; 1187 | } 1188 | 1189 | .md-swap-vert-circle:before { 1190 | content: "\f07d"; 1191 | } 1192 | 1193 | .md-system-update-tv:before { 1194 | content: "\f07e"; 1195 | } 1196 | 1197 | .md-tab:before { 1198 | content: "\f07f"; 1199 | } 1200 | 1201 | .md-tab-unselected:before { 1202 | content: "\f080"; 1203 | } 1204 | 1205 | .md-theaters:before { 1206 | content: "\f081"; 1207 | } 1208 | 1209 | .md-thumb-down:before { 1210 | content: "\f082"; 1211 | } 1212 | 1213 | .md-thumbs-up-down:before { 1214 | content: "\f083"; 1215 | } 1216 | 1217 | .md-thumb-up:before { 1218 | content: "\f084"; 1219 | } 1220 | 1221 | .md-toc:before { 1222 | content: "\f085"; 1223 | } 1224 | 1225 | .md-today:before { 1226 | content: "\f086"; 1227 | } 1228 | 1229 | .md-track-changes:before { 1230 | content: "\f087"; 1231 | } 1232 | 1233 | .md-translate:before { 1234 | content: "\f088"; 1235 | } 1236 | 1237 | .md-trending-down:before { 1238 | content: "\f089"; 1239 | } 1240 | 1241 | .md-trending-neutral:before { 1242 | content: "\f08a"; 1243 | } 1244 | 1245 | .md-trending-up:before { 1246 | content: "\f08b"; 1247 | } 1248 | 1249 | .md-turned-in:before { 1250 | content: "\f08c"; 1251 | } 1252 | 1253 | .md-turned-in-not:before { 1254 | content: "\f08d"; 1255 | } 1256 | 1257 | .md-verified-user:before { 1258 | content: "\f08e"; 1259 | } 1260 | 1261 | .md-view-agenda:before { 1262 | content: "\f08f"; 1263 | } 1264 | 1265 | .md-view-array:before { 1266 | content: "\f090"; 1267 | } 1268 | 1269 | .md-view-carousel:before { 1270 | content: "\f091"; 1271 | } 1272 | 1273 | .md-view-column:before { 1274 | content: "\f092"; 1275 | } 1276 | 1277 | .md-view-day:before { 1278 | content: "\f093"; 1279 | } 1280 | 1281 | .md-view-headline:before { 1282 | content: "\f094"; 1283 | } 1284 | 1285 | .md-view-list:before { 1286 | content: "\f095"; 1287 | } 1288 | 1289 | .md-view-module:before { 1290 | content: "\f096"; 1291 | } 1292 | 1293 | .md-view-quilt:before { 1294 | content: "\f097"; 1295 | } 1296 | 1297 | .md-view-stream:before { 1298 | content: "\f098"; 1299 | } 1300 | 1301 | .md-view-week:before { 1302 | content: "\f099"; 1303 | } 1304 | 1305 | .md-visibility:before { 1306 | content: "\f09a"; 1307 | } 1308 | 1309 | .md-visibility-off:before { 1310 | content: "\f09b"; 1311 | } 1312 | 1313 | .md-wallet-giftcard:before { 1314 | content: "\f09c"; 1315 | } 1316 | 1317 | .md-wallet-membership:before { 1318 | content: "\f09d"; 1319 | } 1320 | 1321 | .md-wallet-travel:before { 1322 | content: "\f09e"; 1323 | } 1324 | 1325 | .md-work:before { 1326 | content: "\f09f"; 1327 | } 1328 | 1329 | .md-error:before { 1330 | content: "\f0a0"; 1331 | } 1332 | 1333 | .md-warning:before { 1334 | content: "\f0a1"; 1335 | } 1336 | 1337 | .md-album:before { 1338 | content: "\f0a2"; 1339 | } 1340 | 1341 | .md-av-timer:before { 1342 | content: "\f0a3"; 1343 | } 1344 | 1345 | .md-closed-caption:before { 1346 | content: "\f0a4"; 1347 | } 1348 | 1349 | .md-equalizer:before { 1350 | content: "\f0a5"; 1351 | } 1352 | 1353 | .md-explicit:before { 1354 | content: "\f0a6"; 1355 | } 1356 | 1357 | .md-fast-forward:before { 1358 | content: "\f0a7"; 1359 | } 1360 | 1361 | .md-fast-rewind:before { 1362 | content: "\f0a8"; 1363 | } 1364 | 1365 | .md-games:before { 1366 | content: "\f0a9"; 1367 | } 1368 | 1369 | .md-hearing:before { 1370 | content: "\f0aa"; 1371 | } 1372 | 1373 | .md-high-quality:before { 1374 | content: "\f0ab"; 1375 | } 1376 | 1377 | .md-loop:before { 1378 | content: "\f0ac"; 1379 | } 1380 | 1381 | .md-mic:before { 1382 | content: "\f0ad"; 1383 | } 1384 | 1385 | .md-mic-none:before { 1386 | content: "\f0ae"; 1387 | } 1388 | 1389 | .md-mic-off:before { 1390 | content: "\f0af"; 1391 | } 1392 | 1393 | .md-movie:before { 1394 | content: "\f0b0"; 1395 | } 1396 | 1397 | .md-my-library-add:before { 1398 | content: "\f0b1"; 1399 | } 1400 | 1401 | .md-my-library-books:before { 1402 | content: "\f0b2"; 1403 | } 1404 | 1405 | .md-my-library-music:before { 1406 | content: "\f0b3"; 1407 | } 1408 | 1409 | .md-new-releases:before { 1410 | content: "\f0b4"; 1411 | } 1412 | 1413 | .md-not-interested:before { 1414 | content: "\f0b5"; 1415 | } 1416 | 1417 | .md-pause:before { 1418 | content: "\f0b6"; 1419 | } 1420 | 1421 | .md-pause-circle-fill:before { 1422 | content: "\f0b7"; 1423 | } 1424 | 1425 | .md-pause-circle-outline:before { 1426 | content: "\f0b8"; 1427 | } 1428 | 1429 | .md-play-arrow:before { 1430 | content: "\f0b9"; 1431 | } 1432 | 1433 | .md-play-circle-fill:before { 1434 | content: "\f0ba"; 1435 | } 1436 | 1437 | .md-play-circle-outline:before { 1438 | content: "\f0bb"; 1439 | } 1440 | 1441 | .md-playlist-add:before { 1442 | content: "\f0bc"; 1443 | } 1444 | 1445 | .md-play-shopping-bag:before { 1446 | content: "\f0bd"; 1447 | } 1448 | 1449 | .md-queue:before { 1450 | content: "\f0be"; 1451 | } 1452 | 1453 | .md-queue-music:before { 1454 | content: "\f0bf"; 1455 | } 1456 | 1457 | .md-radio:before { 1458 | content: "\f0c0"; 1459 | } 1460 | 1461 | .md-recent-actors:before { 1462 | content: "\f0c1"; 1463 | } 1464 | 1465 | .md-repeat:before { 1466 | content: "\f0c2"; 1467 | } 1468 | 1469 | .md-repeat-one:before { 1470 | content: "\f0c3"; 1471 | } 1472 | 1473 | .md-replay:before { 1474 | content: "\f0c4"; 1475 | } 1476 | 1477 | .md-shuffle:before { 1478 | content: "\f0c5"; 1479 | } 1480 | 1481 | .md-skip-next:before { 1482 | content: "\f0c6"; 1483 | } 1484 | 1485 | .md-skip-previous:before { 1486 | content: "\f0c7"; 1487 | } 1488 | 1489 | .md-snooze:before { 1490 | content: "\f0c8"; 1491 | } 1492 | 1493 | .md-stop:before { 1494 | content: "\f0c9"; 1495 | } 1496 | 1497 | .md-subtitles:before { 1498 | content: "\f0ca"; 1499 | } 1500 | 1501 | .md-surround-sound:before { 1502 | content: "\f0cb"; 1503 | } 1504 | 1505 | .md-videocam:before { 1506 | content: "\f0cc"; 1507 | } 1508 | 1509 | .md-videocam-off:before { 1510 | content: "\f0cd"; 1511 | } 1512 | 1513 | .md-video-collection:before { 1514 | content: "\f0ce"; 1515 | } 1516 | 1517 | .md-volume-down:before { 1518 | content: "\f0cf"; 1519 | } 1520 | 1521 | .md-volume-mute:before { 1522 | content: "\f0d0"; 1523 | } 1524 | 1525 | .md-volume-off:before { 1526 | content: "\f0d1"; 1527 | } 1528 | 1529 | .md-volume-up:before { 1530 | content: "\f0d2"; 1531 | } 1532 | 1533 | .md-web:before { 1534 | content: "\f0d3"; 1535 | } 1536 | 1537 | .md-business:before { 1538 | content: "\f0d4"; 1539 | } 1540 | 1541 | .md-call:before { 1542 | content: "\f0d5"; 1543 | } 1544 | 1545 | .md-call-end:before { 1546 | content: "\f0d6"; 1547 | } 1548 | 1549 | .md-call-made:before { 1550 | content: "\f0d7"; 1551 | } 1552 | 1553 | .md-call-merge:before { 1554 | content: "\f0d8"; 1555 | } 1556 | 1557 | .md-call-missed:before { 1558 | content: "\f0d9"; 1559 | } 1560 | 1561 | .md-call-received:before { 1562 | content: "\f0da"; 1563 | } 1564 | 1565 | .md-call-split:before { 1566 | content: "\f0db"; 1567 | } 1568 | 1569 | .md-chat:before { 1570 | content: "\f0dc"; 1571 | } 1572 | 1573 | .md-clear-all:before { 1574 | content: "\f0dd"; 1575 | } 1576 | 1577 | .md-comment:before { 1578 | content: "\f0de"; 1579 | } 1580 | 1581 | .md-contacts:before { 1582 | content: "\f0df"; 1583 | } 1584 | 1585 | .md-dialer-sip:before { 1586 | content: "\f0e0"; 1587 | } 1588 | 1589 | .md-dialpad:before { 1590 | content: "\f0e1"; 1591 | } 1592 | 1593 | .md-dnd-on:before { 1594 | content: "\f0e2"; 1595 | } 1596 | 1597 | .md-email:before { 1598 | content: "\f0e3"; 1599 | } 1600 | 1601 | .md-forum:before { 1602 | content: "\f0e4"; 1603 | } 1604 | 1605 | .md-import-export:before { 1606 | content: "\f0e5"; 1607 | } 1608 | 1609 | .md-invert-colors-off:before { 1610 | content: "\f0e6"; 1611 | } 1612 | 1613 | .md-invert-colors-on:before { 1614 | content: "\f0e7"; 1615 | } 1616 | 1617 | .md-live-help:before { 1618 | content: "\f0e8"; 1619 | } 1620 | 1621 | .md-location-off:before { 1622 | content: "\f0e9"; 1623 | } 1624 | 1625 | .md-location-on:before { 1626 | content: "\f0ea"; 1627 | } 1628 | 1629 | .md-message:before { 1630 | content: "\f0eb"; 1631 | } 1632 | 1633 | .md-messenger:before { 1634 | content: "\f0ec"; 1635 | } 1636 | 1637 | .md-no-sim:before { 1638 | content: "\f0ed"; 1639 | } 1640 | 1641 | .md-phone:before { 1642 | content: "\f0ee"; 1643 | } 1644 | 1645 | .md-portable-wifi-off:before { 1646 | content: "\f0ef"; 1647 | } 1648 | 1649 | .md-quick-contacts-dialer:before { 1650 | content: "\f0f0"; 1651 | } 1652 | 1653 | .md-quick-contacts-mail:before { 1654 | content: "\f0f1"; 1655 | } 1656 | 1657 | .md-ring-volume:before { 1658 | content: "\f0f2"; 1659 | } 1660 | 1661 | .md-stay-current-landscape:before { 1662 | content: "\f0f3"; 1663 | } 1664 | 1665 | .md-stay-current-portrait:before { 1666 | content: "\f0f4"; 1667 | } 1668 | 1669 | .md-stay-primary-landscape:before { 1670 | content: "\f0f5"; 1671 | } 1672 | 1673 | .md-stay-primary-portrait:before { 1674 | content: "\f0f6"; 1675 | } 1676 | 1677 | .md-swap-calls:before { 1678 | content: "\f0f7"; 1679 | } 1680 | 1681 | .md-textsms:before { 1682 | content: "\f0f8"; 1683 | } 1684 | 1685 | .md-voicemail:before { 1686 | content: "\f0f9"; 1687 | } 1688 | 1689 | .md-vpn-key:before { 1690 | content: "\f0fa"; 1691 | } 1692 | 1693 | .md-add:before { 1694 | content: "\f0fb"; 1695 | } 1696 | 1697 | .md-add-box:before { 1698 | content: "\f0fc"; 1699 | } 1700 | 1701 | .md-add-circle:before { 1702 | content: "\f0fd"; 1703 | } 1704 | 1705 | .md-add-circle-outline:before { 1706 | content: "\f0fe"; 1707 | } 1708 | 1709 | .md-archive:before { 1710 | content: "\f0ff"; 1711 | } 1712 | 1713 | .md-backspace:before { 1714 | content: "\f100"; 1715 | } 1716 | 1717 | .md-block:before { 1718 | content: "\f101"; 1719 | } 1720 | 1721 | .md-clear:before { 1722 | content: "\f102"; 1723 | } 1724 | 1725 | .md-content-copy:before { 1726 | content: "\f103"; 1727 | } 1728 | 1729 | .md-content-cut:before { 1730 | content: "\f104"; 1731 | } 1732 | 1733 | .md-content-paste:before { 1734 | content: "\f105"; 1735 | } 1736 | 1737 | .md-create:before { 1738 | content: "\f106"; 1739 | } 1740 | 1741 | .md-drafts:before { 1742 | content: "\f107"; 1743 | } 1744 | 1745 | .md-filter-list:before { 1746 | content: "\f108"; 1747 | } 1748 | 1749 | .md-flag:before { 1750 | content: "\f109"; 1751 | } 1752 | 1753 | .md-forward:before { 1754 | content: "\f10a"; 1755 | } 1756 | 1757 | .md-gesture:before { 1758 | content: "\f10b"; 1759 | } 1760 | 1761 | .md-inbox:before { 1762 | content: "\f10c"; 1763 | } 1764 | 1765 | .md-link:before { 1766 | content: "\f10d"; 1767 | } 1768 | 1769 | .md-mail:before { 1770 | content: "\f10e"; 1771 | } 1772 | 1773 | .md-markunread:before { 1774 | content: "\f10f"; 1775 | } 1776 | 1777 | .md-redo:before { 1778 | content: "\f110"; 1779 | } 1780 | 1781 | .md-remove:before { 1782 | content: "\f111"; 1783 | } 1784 | 1785 | .md-remove-circle:before { 1786 | content: "\f112"; 1787 | } 1788 | 1789 | .md-remove-circle-outline:before { 1790 | content: "\f113"; 1791 | } 1792 | 1793 | .md-reply:before { 1794 | content: "\f114"; 1795 | } 1796 | 1797 | .md-reply-all:before { 1798 | content: "\f115"; 1799 | } 1800 | 1801 | .md-report:before { 1802 | content: "\f116"; 1803 | } 1804 | 1805 | .md-save:before { 1806 | content: "\f117"; 1807 | } 1808 | 1809 | .md-select-all:before { 1810 | content: "\f118"; 1811 | } 1812 | 1813 | .md-send:before { 1814 | content: "\f119"; 1815 | } 1816 | 1817 | .md-sort:before { 1818 | content: "\f11a"; 1819 | } 1820 | 1821 | .md-text-format:before { 1822 | content: "\f11b"; 1823 | } 1824 | 1825 | .md-undo:before { 1826 | content: "\f11c"; 1827 | } 1828 | 1829 | .md-access-alarm:before { 1830 | content: "\f11d"; 1831 | } 1832 | 1833 | .md-access-alarms:before { 1834 | content: "\f11e"; 1835 | } 1836 | 1837 | .md-access-time:before { 1838 | content: "\f11f"; 1839 | } 1840 | 1841 | .md-add-alarm:before { 1842 | content: "\f120"; 1843 | } 1844 | 1845 | .md-airplanemode-off:before { 1846 | content: "\f121"; 1847 | } 1848 | 1849 | .md-airplanemode-on:before { 1850 | content: "\f122"; 1851 | } 1852 | 1853 | .md-battery-20:before { 1854 | content: "\f123"; 1855 | } 1856 | 1857 | .md-battery-30:before { 1858 | content: "\f124"; 1859 | } 1860 | 1861 | .md-battery-50:before { 1862 | content: "\f125"; 1863 | } 1864 | 1865 | .md-battery-60:before { 1866 | content: "\f126"; 1867 | } 1868 | 1869 | .md-battery-80:before { 1870 | content: "\f127"; 1871 | } 1872 | 1873 | .md-battery-90:before { 1874 | content: "\f128"; 1875 | } 1876 | 1877 | .md-battery-alert:before { 1878 | content: "\f129"; 1879 | } 1880 | 1881 | .md-battery-charging-20:before { 1882 | content: "\f12a"; 1883 | } 1884 | 1885 | .md-battery-charging-30:before { 1886 | content: "\f12b"; 1887 | } 1888 | 1889 | .md-battery-charging-50:before { 1890 | content: "\f12c"; 1891 | } 1892 | 1893 | .md-battery-charging-60:before { 1894 | content: "\f12d"; 1895 | } 1896 | 1897 | .md-battery-charging-80:before { 1898 | content: "\f12e"; 1899 | } 1900 | 1901 | .md-battery-charging-90:before { 1902 | content: "\f12f"; 1903 | } 1904 | 1905 | .md-battery-charging-full:before { 1906 | content: "\f130"; 1907 | } 1908 | 1909 | .md-battery-full:before { 1910 | content: "\f131"; 1911 | } 1912 | 1913 | .md-battery-std:before { 1914 | content: "\f132"; 1915 | } 1916 | 1917 | .md-battery-unknown:before { 1918 | content: "\f133"; 1919 | } 1920 | 1921 | .md-bluetooth:before { 1922 | content: "\f134"; 1923 | } 1924 | 1925 | .md-bluetooth-connected:before { 1926 | content: "\f135"; 1927 | } 1928 | 1929 | .md-bluetooth-disabled:before { 1930 | content: "\f136"; 1931 | } 1932 | 1933 | .md-bluetooth-searching:before { 1934 | content: "\f137"; 1935 | } 1936 | 1937 | .md-brightness-auto:before { 1938 | content: "\f138"; 1939 | } 1940 | 1941 | .md-brightness-high:before { 1942 | content: "\f139"; 1943 | } 1944 | 1945 | .md-brightness-low:before { 1946 | content: "\f13a"; 1947 | } 1948 | 1949 | .md-brightness-medium:before { 1950 | content: "\f13b"; 1951 | } 1952 | 1953 | .md-data-usage:before { 1954 | content: "\f13c"; 1955 | } 1956 | 1957 | .md-developer-mode:before { 1958 | content: "\f13d"; 1959 | } 1960 | 1961 | .md-devices:before { 1962 | content: "\f13e"; 1963 | } 1964 | 1965 | .md-dvr:before { 1966 | content: "\f13f"; 1967 | } 1968 | 1969 | .md-gps-fixed:before { 1970 | content: "\f140"; 1971 | } 1972 | 1973 | .md-gps-not-fixed:before { 1974 | content: "\f141"; 1975 | } 1976 | 1977 | .md-gps-off:before { 1978 | content: "\f142"; 1979 | } 1980 | 1981 | .md-location-disabled:before { 1982 | content: "\f143"; 1983 | } 1984 | 1985 | .md-location-searching:before { 1986 | content: "\f144"; 1987 | } 1988 | 1989 | .md-multitrack-audio:before { 1990 | content: "\f145"; 1991 | } 1992 | 1993 | .md-network-cell:before { 1994 | content: "\f146"; 1995 | } 1996 | 1997 | .md-network-wifi:before { 1998 | content: "\f147"; 1999 | } 2000 | 2001 | .md-nfc:before { 2002 | content: "\f148"; 2003 | } 2004 | 2005 | .md-now-wallpaper:before { 2006 | content: "\f149"; 2007 | } 2008 | 2009 | .md-now-widgets:before { 2010 | content: "\f14a"; 2011 | } 2012 | 2013 | .md-screen-lock-landscape:before { 2014 | content: "\f14b"; 2015 | } 2016 | 2017 | .md-screen-lock-portrait:before { 2018 | content: "\f14c"; 2019 | } 2020 | 2021 | .md-screen-lock-rotation:before { 2022 | content: "\f14d"; 2023 | } 2024 | 2025 | .md-screen-rotation:before { 2026 | content: "\f14e"; 2027 | } 2028 | 2029 | .md-sd-storage:before { 2030 | content: "\f14f"; 2031 | } 2032 | 2033 | .md-settings-system-daydream:before { 2034 | content: "\f150"; 2035 | } 2036 | 2037 | .md-signal-cellular-0-bar:before { 2038 | content: "\f151"; 2039 | } 2040 | 2041 | .md-signal-cellular-1-bar:before { 2042 | content: "\f152"; 2043 | } 2044 | 2045 | .md-signal-cellular-2-bar:before { 2046 | content: "\f153"; 2047 | } 2048 | 2049 | .md-signal-cellular-3-bar:before { 2050 | content: "\f154"; 2051 | } 2052 | 2053 | .md-signal-cellular-4-bar:before { 2054 | content: "\f155"; 2055 | } 2056 | 2057 | .md-signal-cellular-connected-no-internet-0-bar:before { 2058 | content: "\f156"; 2059 | } 2060 | 2061 | .md-signal-cellular-connected-no-internet-1-bar:before { 2062 | content: "\f157"; 2063 | } 2064 | 2065 | .md-signal-cellular-connected-no-internet-2-bar:before { 2066 | content: "\f158"; 2067 | } 2068 | 2069 | .md-signal-cellular-connected-no-internet-3-bar:before { 2070 | content: "\f159"; 2071 | } 2072 | 2073 | .md-signal-cellular-connected-no-internet-4-bar:before { 2074 | content: "\f15a"; 2075 | } 2076 | 2077 | .md-signal-cellular-no-sim:before { 2078 | content: "\f15b"; 2079 | } 2080 | 2081 | .md-signal-cellular-null:before { 2082 | content: "\f15c"; 2083 | } 2084 | 2085 | .md-signal-cellular-off:before { 2086 | content: "\f15d"; 2087 | } 2088 | 2089 | .md-signal-wifi-0-bar:before { 2090 | content: "\f15e"; 2091 | } 2092 | 2093 | .md-signal-wifi-1-bar:before { 2094 | content: "\f15f"; 2095 | } 2096 | 2097 | .md-signal-wifi-2-bar:before { 2098 | content: "\f160"; 2099 | } 2100 | 2101 | .md-signal-wifi-3-bar:before { 2102 | content: "\f161"; 2103 | } 2104 | 2105 | .md-signal-wifi-4-bar:before { 2106 | content: "\f162"; 2107 | } 2108 | 2109 | .md-signal-wifi-off:before { 2110 | content: "\f163"; 2111 | } 2112 | 2113 | .md-storage:before { 2114 | content: "\f164"; 2115 | } 2116 | 2117 | .md-usb:before { 2118 | content: "\f165"; 2119 | } 2120 | 2121 | .md-wifi-lock:before { 2122 | content: "\f166"; 2123 | } 2124 | 2125 | .md-wifi-tethering:before { 2126 | content: "\f167"; 2127 | } 2128 | 2129 | .md-attach-file:before { 2130 | content: "\f168"; 2131 | } 2132 | 2133 | .md-attach-money:before { 2134 | content: "\f169"; 2135 | } 2136 | 2137 | .md-border-all:before { 2138 | content: "\f16a"; 2139 | } 2140 | 2141 | .md-border-bottom:before { 2142 | content: "\f16b"; 2143 | } 2144 | 2145 | .md-border-clear:before { 2146 | content: "\f16c"; 2147 | } 2148 | 2149 | .md-border-color:before { 2150 | content: "\f16d"; 2151 | } 2152 | 2153 | .md-border-horizontal:before { 2154 | content: "\f16e"; 2155 | } 2156 | 2157 | .md-border-inner:before { 2158 | content: "\f16f"; 2159 | } 2160 | 2161 | .md-border-left:before { 2162 | content: "\f170"; 2163 | } 2164 | 2165 | .md-border-outer:before { 2166 | content: "\f171"; 2167 | } 2168 | 2169 | .md-border-right:before { 2170 | content: "\f172"; 2171 | } 2172 | 2173 | .md-border-style:before { 2174 | content: "\f173"; 2175 | } 2176 | 2177 | .md-border-top:before { 2178 | content: "\f174"; 2179 | } 2180 | 2181 | .md-border-vertical:before { 2182 | content: "\f175"; 2183 | } 2184 | 2185 | .md-format-align-center:before { 2186 | content: "\f176"; 2187 | } 2188 | 2189 | .md-format-align-justify:before { 2190 | content: "\f177"; 2191 | } 2192 | 2193 | .md-format-align-left:before { 2194 | content: "\f178"; 2195 | } 2196 | 2197 | .md-format-align-right:before { 2198 | content: "\f179"; 2199 | } 2200 | 2201 | .md-format-bold:before { 2202 | content: "\f17a"; 2203 | } 2204 | 2205 | .md-format-clear:before { 2206 | content: "\f17b"; 2207 | } 2208 | 2209 | .md-format-color-fill:before { 2210 | content: "\f17c"; 2211 | } 2212 | 2213 | .md-format-color-reset:before { 2214 | content: "\f17d"; 2215 | } 2216 | 2217 | .md-format-color-text:before { 2218 | content: "\f17e"; 2219 | } 2220 | 2221 | .md-format-indent-decrease:before { 2222 | content: "\f17f"; 2223 | } 2224 | 2225 | .md-format-indent-increase:before { 2226 | content: "\f180"; 2227 | } 2228 | 2229 | .md-format-italic:before { 2230 | content: "\f181"; 2231 | } 2232 | 2233 | .md-format-line-spacing:before { 2234 | content: "\f182"; 2235 | } 2236 | 2237 | .md-format-list-bulleted:before { 2238 | content: "\f183"; 2239 | } 2240 | 2241 | .md-format-list-numbered:before { 2242 | content: "\f184"; 2243 | } 2244 | 2245 | .md-format-paint:before { 2246 | content: "\f185"; 2247 | } 2248 | 2249 | .md-format-quote:before { 2250 | content: "\f186"; 2251 | } 2252 | 2253 | .md-format-size:before { 2254 | content: "\f187"; 2255 | } 2256 | 2257 | .md-format-strikethrough:before { 2258 | content: "\f188"; 2259 | } 2260 | 2261 | .md-format-textdirection-l-to-r:before { 2262 | content: "\f189"; 2263 | } 2264 | 2265 | .md-format-textdirection-r-to-l:before { 2266 | content: "\f18a"; 2267 | } 2268 | 2269 | .md-format-underline:before { 2270 | content: "\f18b"; 2271 | } 2272 | 2273 | .md-functions:before { 2274 | content: "\f18c"; 2275 | } 2276 | 2277 | .md-insert-chart:before { 2278 | content: "\f18d"; 2279 | } 2280 | 2281 | .md-insert-comment:before { 2282 | content: "\f18e"; 2283 | } 2284 | 2285 | .md-insert-drive-file:before { 2286 | content: "\f18f"; 2287 | } 2288 | 2289 | .md-insert-emoticon:before { 2290 | content: "\f190"; 2291 | } 2292 | 2293 | .md-insert-invitation:before { 2294 | content: "\f191"; 2295 | } 2296 | 2297 | .md-insert-link:before { 2298 | content: "\f192"; 2299 | } 2300 | 2301 | .md-insert-photo:before { 2302 | content: "\f193"; 2303 | } 2304 | 2305 | .md-merge-type:before { 2306 | content: "\f194"; 2307 | } 2308 | 2309 | .md-mode-comment:before { 2310 | content: "\f195"; 2311 | } 2312 | 2313 | .md-mode-edit:before { 2314 | content: "\f196"; 2315 | } 2316 | 2317 | .md-publish:before { 2318 | content: "\f197"; 2319 | } 2320 | 2321 | .md-vertical-align-bottom:before { 2322 | content: "\f198"; 2323 | } 2324 | 2325 | .md-vertical-align-center:before { 2326 | content: "\f199"; 2327 | } 2328 | 2329 | .md-vertical-align-top:before { 2330 | content: "\f19a"; 2331 | } 2332 | 2333 | .md-wrap-text:before { 2334 | content: "\f19b"; 2335 | } 2336 | 2337 | .md-attachment:before { 2338 | content: "\f19c"; 2339 | } 2340 | 2341 | .md-cloud:before { 2342 | content: "\f19d"; 2343 | } 2344 | 2345 | .md-cloud-circle:before { 2346 | content: "\f19e"; 2347 | } 2348 | 2349 | .md-cloud-done:before { 2350 | content: "\f19f"; 2351 | } 2352 | 2353 | .md-cloud-download:before { 2354 | content: "\f1a0"; 2355 | } 2356 | 2357 | .md-cloud-off:before { 2358 | content: "\f1a1"; 2359 | } 2360 | 2361 | .md-cloud-queue:before { 2362 | content: "\f1a2"; 2363 | } 2364 | 2365 | .md-cloud-upload:before { 2366 | content: "\f1a3"; 2367 | } 2368 | 2369 | .md-file-download:before { 2370 | content: "\f1a4"; 2371 | } 2372 | 2373 | .md-file-upload:before { 2374 | content: "\f1a5"; 2375 | } 2376 | 2377 | .md-folder:before { 2378 | content: "\f1a6"; 2379 | } 2380 | 2381 | .md-folder-open:before { 2382 | content: "\f1a7"; 2383 | } 2384 | 2385 | .md-folder-shared:before { 2386 | content: "\f1a8"; 2387 | } 2388 | 2389 | .md-cast:before { 2390 | content: "\f1a9"; 2391 | } 2392 | 2393 | .md-cast-connected:before { 2394 | content: "\f1aa"; 2395 | } 2396 | 2397 | .md-computer:before { 2398 | content: "\f1ab"; 2399 | } 2400 | 2401 | .md-desktop-mac:before { 2402 | content: "\f1ac"; 2403 | } 2404 | 2405 | .md-desktop-windows:before { 2406 | content: "\f1ad"; 2407 | } 2408 | 2409 | .md-dock:before { 2410 | content: "\f1ae"; 2411 | } 2412 | 2413 | .md-gamepad:before { 2414 | content: "\f1af"; 2415 | } 2416 | 2417 | .md-headset:before { 2418 | content: "\f1b0"; 2419 | } 2420 | 2421 | .md-headset-mic:before { 2422 | content: "\f1b1"; 2423 | } 2424 | 2425 | .md-keyboard:before { 2426 | content: "\f1b2"; 2427 | } 2428 | 2429 | .md-keyboard-alt:before { 2430 | content: "\f1b3"; 2431 | } 2432 | 2433 | .md-keyboard-arrow-down:before { 2434 | content: "\f1b4"; 2435 | } 2436 | 2437 | .md-keyboard-arrow-left:before { 2438 | content: "\f1b5"; 2439 | } 2440 | 2441 | .md-keyboard-arrow-right:before { 2442 | content: "\f1b6"; 2443 | } 2444 | 2445 | .md-keyboard-arrow-up:before { 2446 | content: "\f1b7"; 2447 | } 2448 | 2449 | .md-keyboard-backspace:before { 2450 | content: "\f1b8"; 2451 | } 2452 | 2453 | .md-keyboard-capslock:before { 2454 | content: "\f1b9"; 2455 | } 2456 | 2457 | .md-keyboard-control:before { 2458 | content: "\f1ba"; 2459 | } 2460 | 2461 | .md-keyboard-hide:before { 2462 | content: "\f1bb"; 2463 | } 2464 | 2465 | .md-keyboard-return:before { 2466 | content: "\f1bc"; 2467 | } 2468 | 2469 | .md-keyboard-tab:before { 2470 | content: "\f1bd"; 2471 | } 2472 | 2473 | .md-keyboard-voice:before { 2474 | content: "\f1be"; 2475 | } 2476 | 2477 | .md-laptop:before { 2478 | content: "\f1bf"; 2479 | } 2480 | 2481 | .md-laptop-chromebook:before { 2482 | content: "\f1c0"; 2483 | } 2484 | 2485 | .md-laptop-mac:before { 2486 | content: "\f1c1"; 2487 | } 2488 | 2489 | .md-laptop-windows:before { 2490 | content: "\f1c2"; 2491 | } 2492 | 2493 | .md-memory:before { 2494 | content: "\f1c3"; 2495 | } 2496 | 2497 | .md-mouse:before { 2498 | content: "\f1c4"; 2499 | } 2500 | 2501 | .md-phone-android:before { 2502 | content: "\f1c5"; 2503 | } 2504 | 2505 | .md-phone-iphone:before { 2506 | content: "\f1c6"; 2507 | } 2508 | 2509 | .md-phonelink:before { 2510 | content: "\f1c7"; 2511 | } 2512 | 2513 | .md-phonelink-off:before { 2514 | content: "\f1c8"; 2515 | } 2516 | 2517 | .md-security:before { 2518 | content: "\f1c9"; 2519 | } 2520 | 2521 | .md-sim-card:before { 2522 | content: "\f1ca"; 2523 | } 2524 | 2525 | .md-smartphone:before { 2526 | content: "\f1cb"; 2527 | } 2528 | 2529 | .md-speaker:before { 2530 | content: "\f1cc"; 2531 | } 2532 | 2533 | .md-tablet:before { 2534 | content: "\f1cd"; 2535 | } 2536 | 2537 | .md-tablet-android:before { 2538 | content: "\f1ce"; 2539 | } 2540 | 2541 | .md-tablet-mac:before { 2542 | content: "\f1cf"; 2543 | } 2544 | 2545 | .md-tv:before { 2546 | content: "\f1d0"; 2547 | } 2548 | 2549 | .md-watch:before { 2550 | content: "\f1d1"; 2551 | } 2552 | 2553 | .md-add-to-photos:before { 2554 | content: "\f1d2"; 2555 | } 2556 | 2557 | .md-adjust:before { 2558 | content: "\f1d3"; 2559 | } 2560 | 2561 | .md-assistant-photo:before { 2562 | content: "\f1d4"; 2563 | } 2564 | 2565 | .md-audiotrack:before { 2566 | content: "\f1d5"; 2567 | } 2568 | 2569 | .md-blur-circular:before { 2570 | content: "\f1d6"; 2571 | } 2572 | 2573 | .md-blur-linear:before { 2574 | content: "\f1d7"; 2575 | } 2576 | 2577 | .md-blur-off:before { 2578 | content: "\f1d8"; 2579 | } 2580 | 2581 | .md-blur-on:before { 2582 | content: "\f1d9"; 2583 | } 2584 | 2585 | .md-brightness-1:before { 2586 | content: "\f1da"; 2587 | } 2588 | 2589 | .md-brightness-2:before { 2590 | content: "\f1db"; 2591 | } 2592 | 2593 | .md-brightness-3:before { 2594 | content: "\f1dc"; 2595 | } 2596 | 2597 | .md-brightness-4:before { 2598 | content: "\f1dd"; 2599 | } 2600 | 2601 | .md-brightness-5:before { 2602 | content: "\f1de"; 2603 | } 2604 | 2605 | .md-brightness-6:before { 2606 | content: "\f1df"; 2607 | } 2608 | 2609 | .md-brightness-7:before { 2610 | content: "\f1e0"; 2611 | } 2612 | 2613 | .md-brush:before { 2614 | content: "\f1e1"; 2615 | } 2616 | 2617 | .md-camera:before { 2618 | content: "\f1e2"; 2619 | } 2620 | 2621 | .md-camera-alt:before { 2622 | content: "\f1e3"; 2623 | } 2624 | 2625 | .md-camera-front:before { 2626 | content: "\f1e4"; 2627 | } 2628 | 2629 | .md-camera-rear:before { 2630 | content: "\f1e5"; 2631 | } 2632 | 2633 | .md-camera-roll:before { 2634 | content: "\f1e6"; 2635 | } 2636 | 2637 | .md-center-focus-strong:before { 2638 | content: "\f1e7"; 2639 | } 2640 | 2641 | .md-center-focus-weak:before { 2642 | content: "\f1e8"; 2643 | } 2644 | 2645 | .md-collections:before { 2646 | content: "\f1e9"; 2647 | } 2648 | 2649 | .md-colorize:before { 2650 | content: "\f1ea"; 2651 | } 2652 | 2653 | .md-color-lens:before { 2654 | content: "\f1eb"; 2655 | } 2656 | 2657 | .md-compare:before { 2658 | content: "\f1ec"; 2659 | } 2660 | 2661 | .md-control-point:before { 2662 | content: "\f1ed"; 2663 | } 2664 | 2665 | .md-control-point-duplicate:before { 2666 | content: "\f1ee"; 2667 | } 2668 | 2669 | .md-crop:before { 2670 | content: "\f1ef"; 2671 | } 2672 | 2673 | .md-crop-3-2:before { 2674 | content: "\f1f0"; 2675 | } 2676 | 2677 | .md-crop-5-4:before { 2678 | content: "\f1f1"; 2679 | } 2680 | 2681 | .md-crop-7-5:before { 2682 | content: "\f1f2"; 2683 | } 2684 | 2685 | .md-crop-16-9:before { 2686 | content: "\f1f3"; 2687 | } 2688 | 2689 | .md-crop-din:before { 2690 | content: "\f1f4"; 2691 | } 2692 | 2693 | .md-crop-free:before { 2694 | content: "\f1f5"; 2695 | } 2696 | 2697 | .md-crop-landscape:before { 2698 | content: "\f1f6"; 2699 | } 2700 | 2701 | .md-crop-original:before { 2702 | content: "\f1f7"; 2703 | } 2704 | 2705 | .md-crop-portrait:before { 2706 | content: "\f1f8"; 2707 | } 2708 | 2709 | .md-crop-square:before { 2710 | content: "\f1f9"; 2711 | } 2712 | 2713 | .md-dehaze:before { 2714 | content: "\f1fa"; 2715 | } 2716 | 2717 | .md-details:before { 2718 | content: "\f1fb"; 2719 | } 2720 | 2721 | .md-edit:before { 2722 | content: "\f1fc"; 2723 | } 2724 | 2725 | .md-exposure:before { 2726 | content: "\f1fd"; 2727 | } 2728 | 2729 | .md-exposure-minus-1:before { 2730 | content: "\f1fe"; 2731 | } 2732 | 2733 | .md-exposure-minus-2:before { 2734 | content: "\f1ff"; 2735 | } 2736 | 2737 | .md-exposure-zero:before { 2738 | content: "\f200"; 2739 | } 2740 | 2741 | .md-exposure-plus-1:before { 2742 | content: "\f201"; 2743 | } 2744 | 2745 | .md-exposure-plus-2:before { 2746 | content: "\f202"; 2747 | } 2748 | 2749 | .md-filter:before { 2750 | content: "\f203"; 2751 | } 2752 | 2753 | .md-filter-1:before { 2754 | content: "\f204"; 2755 | } 2756 | 2757 | .md-filter-2:before { 2758 | content: "\f205"; 2759 | } 2760 | 2761 | .md-filter-3:before { 2762 | content: "\f206"; 2763 | } 2764 | 2765 | .md-filter-4:before { 2766 | content: "\f207"; 2767 | } 2768 | 2769 | .md-filter-5:before { 2770 | content: "\f208"; 2771 | } 2772 | 2773 | .md-filter-6:before { 2774 | content: "\f209"; 2775 | } 2776 | 2777 | .md-filter-7:before { 2778 | content: "\f20a"; 2779 | } 2780 | 2781 | .md-filter-8:before { 2782 | content: "\f20b"; 2783 | } 2784 | 2785 | .md-filter-9:before { 2786 | content: "\f20c"; 2787 | } 2788 | 2789 | .md-filter-9-plus:before { 2790 | content: "\f20d"; 2791 | } 2792 | 2793 | .md-filter-b-and-w:before { 2794 | content: "\f20e"; 2795 | } 2796 | 2797 | .md-filter-center-focus:before { 2798 | content: "\f20f"; 2799 | } 2800 | 2801 | .md-filter-drama:before { 2802 | content: "\f210"; 2803 | } 2804 | 2805 | .md-filter-frames:before { 2806 | content: "\f211"; 2807 | } 2808 | 2809 | .md-filter-hdr:before { 2810 | content: "\f212"; 2811 | } 2812 | 2813 | .md-filter-none:before { 2814 | content: "\f213"; 2815 | } 2816 | 2817 | .md-filter-tilt-shift:before { 2818 | content: "\f214"; 2819 | } 2820 | 2821 | .md-filter-vintage:before { 2822 | content: "\f215"; 2823 | } 2824 | 2825 | .md-flare:before { 2826 | content: "\f216"; 2827 | } 2828 | 2829 | .md-flash-auto:before { 2830 | content: "\f217"; 2831 | } 2832 | 2833 | .md-flash-off:before { 2834 | content: "\f218"; 2835 | } 2836 | 2837 | .md-flash-on:before { 2838 | content: "\f219"; 2839 | } 2840 | 2841 | .md-flip:before { 2842 | content: "\f21a"; 2843 | } 2844 | 2845 | .md-gradient:before { 2846 | content: "\f21b"; 2847 | } 2848 | 2849 | .md-grain:before { 2850 | content: "\f21c"; 2851 | } 2852 | 2853 | .md-grid-off:before { 2854 | content: "\f21d"; 2855 | } 2856 | 2857 | .md-grid-on:before { 2858 | content: "\f21e"; 2859 | } 2860 | 2861 | .md-hdr-off:before { 2862 | content: "\f21f"; 2863 | } 2864 | 2865 | .md-hdr-on:before { 2866 | content: "\f220"; 2867 | } 2868 | 2869 | .md-hdr-strong:before { 2870 | content: "\f221"; 2871 | } 2872 | 2873 | .md-hdr-weak:before { 2874 | content: "\f222"; 2875 | } 2876 | 2877 | .md-healing:before { 2878 | content: "\f223"; 2879 | } 2880 | 2881 | .md-image:before { 2882 | content: "\f224"; 2883 | } 2884 | 2885 | .md-image-aspect-ratio:before { 2886 | content: "\f225"; 2887 | } 2888 | 2889 | .md-iso:before { 2890 | content: "\f226"; 2891 | } 2892 | 2893 | .md-landscape:before { 2894 | content: "\f227"; 2895 | } 2896 | 2897 | .md-leak-add:before { 2898 | content: "\f228"; 2899 | } 2900 | 2901 | .md-leak-remove:before { 2902 | content: "\f229"; 2903 | } 2904 | 2905 | .md-lens:before { 2906 | content: "\f22a"; 2907 | } 2908 | 2909 | .md-looks:before { 2910 | content: "\f22b"; 2911 | } 2912 | 2913 | .md-looks-1:before { 2914 | content: "\f22c"; 2915 | } 2916 | 2917 | .md-looks-2:before { 2918 | content: "\f22d"; 2919 | } 2920 | 2921 | .md-looks-3:before { 2922 | content: "\f22e"; 2923 | } 2924 | 2925 | .md-looks-4:before { 2926 | content: "\f22f"; 2927 | } 2928 | 2929 | .md-looks-5:before { 2930 | content: "\f230"; 2931 | } 2932 | 2933 | .md-looks-6:before { 2934 | content: "\f231"; 2935 | } 2936 | 2937 | .md-loupe:before { 2938 | content: "\f232"; 2939 | } 2940 | 2941 | .md-movie-creation:before { 2942 | content: "\f233"; 2943 | } 2944 | 2945 | .md-nature:before { 2946 | content: "\f234"; 2947 | } 2948 | 2949 | .md-nature-people:before { 2950 | content: "\f235"; 2951 | } 2952 | 2953 | .md-navigate-before:before { 2954 | content: "\f236"; 2955 | } 2956 | 2957 | .md-navigate-next:before { 2958 | content: "\f237"; 2959 | } 2960 | 2961 | .md-palette:before { 2962 | content: "\f238"; 2963 | } 2964 | 2965 | .md-panorama:before { 2966 | content: "\f239"; 2967 | } 2968 | 2969 | .md-panorama-fisheye:before { 2970 | content: "\f23a"; 2971 | } 2972 | 2973 | .md-panorama-horizontal:before { 2974 | content: "\f23b"; 2975 | } 2976 | 2977 | .md-panorama-vertical:before { 2978 | content: "\f23c"; 2979 | } 2980 | 2981 | .md-panorama-wide-angle:before { 2982 | content: "\f23d"; 2983 | } 2984 | 2985 | .md-photo:before { 2986 | content: "\f23e"; 2987 | } 2988 | 2989 | .md-photo-album:before { 2990 | content: "\f23f"; 2991 | } 2992 | 2993 | .md-photo-camera:before { 2994 | content: "\f240"; 2995 | } 2996 | 2997 | .md-photo-library:before { 2998 | content: "\f241"; 2999 | } 3000 | 3001 | .md-portrait:before { 3002 | content: "\f242"; 3003 | } 3004 | 3005 | .md-remove-red-eye:before { 3006 | content: "\f243"; 3007 | } 3008 | 3009 | .md-rotate-left:before { 3010 | content: "\f244"; 3011 | } 3012 | 3013 | .md-rotate-right:before { 3014 | content: "\f245"; 3015 | } 3016 | 3017 | .md-slideshow:before { 3018 | content: "\f246"; 3019 | } 3020 | 3021 | .md-straighten:before { 3022 | content: "\f247"; 3023 | } 3024 | 3025 | .md-style:before { 3026 | content: "\f248"; 3027 | } 3028 | 3029 | .md-switch-camera:before { 3030 | content: "\f249"; 3031 | } 3032 | 3033 | .md-switch-video:before { 3034 | content: "\f24a"; 3035 | } 3036 | 3037 | .md-tag-faces:before { 3038 | content: "\f24b"; 3039 | } 3040 | 3041 | .md-texture:before { 3042 | content: "\f24c"; 3043 | } 3044 | 3045 | .md-timelapse:before { 3046 | content: "\f24d"; 3047 | } 3048 | 3049 | .md-timer:before { 3050 | content: "\f24e"; 3051 | } 3052 | 3053 | .md-timer-3:before { 3054 | content: "\f24f"; 3055 | } 3056 | 3057 | .md-timer-10:before { 3058 | content: "\f250"; 3059 | } 3060 | 3061 | .md-timer-auto:before { 3062 | content: "\f251"; 3063 | } 3064 | 3065 | .md-timer-off:before { 3066 | content: "\f252"; 3067 | } 3068 | 3069 | .md-tonality:before { 3070 | content: "\f253"; 3071 | } 3072 | 3073 | .md-transform:before { 3074 | content: "\f254"; 3075 | } 3076 | 3077 | .md-tune:before { 3078 | content: "\f255"; 3079 | } 3080 | 3081 | .md-wb-auto:before { 3082 | content: "\f256"; 3083 | } 3084 | 3085 | .md-wb-cloudy:before { 3086 | content: "\f257"; 3087 | } 3088 | 3089 | .md-wb-incandescent:before { 3090 | content: "\f258"; 3091 | } 3092 | 3093 | .md-wb-irradescent:before { 3094 | content: "\f259"; 3095 | } 3096 | 3097 | .md-wb-sunny:before { 3098 | content: "\f25a"; 3099 | } 3100 | 3101 | .md-beenhere:before { 3102 | content: "\f25b"; 3103 | } 3104 | 3105 | .md-directions:before { 3106 | content: "\f25c"; 3107 | } 3108 | 3109 | .md-directions-bike:before { 3110 | content: "\f25d"; 3111 | } 3112 | 3113 | .md-directions-bus:before { 3114 | content: "\f25e"; 3115 | } 3116 | 3117 | .md-directions-car:before { 3118 | content: "\f25f"; 3119 | } 3120 | 3121 | .md-directions-ferry:before { 3122 | content: "\f260"; 3123 | } 3124 | 3125 | .md-directions-subway:before { 3126 | content: "\f261"; 3127 | } 3128 | 3129 | .md-directions-train:before { 3130 | content: "\f262"; 3131 | } 3132 | 3133 | .md-directions-transit:before { 3134 | content: "\f263"; 3135 | } 3136 | 3137 | .md-directions-walk:before { 3138 | content: "\f264"; 3139 | } 3140 | 3141 | .md-flight:before { 3142 | content: "\f265"; 3143 | } 3144 | 3145 | .md-hotel:before { 3146 | content: "\f266"; 3147 | } 3148 | 3149 | .md-layers:before { 3150 | content: "\f267"; 3151 | } 3152 | 3153 | .md-layers-clear:before { 3154 | content: "\f268"; 3155 | } 3156 | 3157 | .md-local-airport:before { 3158 | content: "\f269"; 3159 | } 3160 | 3161 | .md-local-atm:before { 3162 | content: "\f26a"; 3163 | } 3164 | 3165 | .md-local-attraction:before { 3166 | content: "\f26b"; 3167 | } 3168 | 3169 | .md-local-bar:before { 3170 | content: "\f26c"; 3171 | } 3172 | 3173 | .md-local-cafe:before { 3174 | content: "\f26d"; 3175 | } 3176 | 3177 | .md-local-car-wash:before { 3178 | content: "\f26e"; 3179 | } 3180 | 3181 | .md-local-convenience-store:before { 3182 | content: "\f26f"; 3183 | } 3184 | 3185 | .md-local-drink:before { 3186 | content: "\f270"; 3187 | } 3188 | 3189 | .md-local-florist:before { 3190 | content: "\f271"; 3191 | } 3192 | 3193 | .md-local-gas-station:before { 3194 | content: "\f272"; 3195 | } 3196 | 3197 | .md-local-grocery-store:before { 3198 | content: "\f273"; 3199 | } 3200 | 3201 | .md-local-hospital:before { 3202 | content: "\f274"; 3203 | } 3204 | 3205 | .md-local-hotel:before { 3206 | content: "\f275"; 3207 | } 3208 | 3209 | .md-local-laundry-service:before { 3210 | content: "\f276"; 3211 | } 3212 | 3213 | .md-local-library:before { 3214 | content: "\f277"; 3215 | } 3216 | 3217 | .md-local-mall:before { 3218 | content: "\f278"; 3219 | } 3220 | 3221 | .md-local-movies:before { 3222 | content: "\f279"; 3223 | } 3224 | 3225 | .md-local-offer:before { 3226 | content: "\f27a"; 3227 | } 3228 | 3229 | .md-local-parking:before { 3230 | content: "\f27b"; 3231 | } 3232 | 3233 | .md-local-pharmacy:before { 3234 | content: "\f27c"; 3235 | } 3236 | 3237 | .md-local-phone:before { 3238 | content: "\f27d"; 3239 | } 3240 | 3241 | .md-local-pizza:before { 3242 | content: "\f27e"; 3243 | } 3244 | 3245 | .md-local-play:before { 3246 | content: "\f27f"; 3247 | } 3248 | 3249 | .md-local-post-office:before { 3250 | content: "\f280"; 3251 | } 3252 | 3253 | .md-local-print-shop:before { 3254 | content: "\f281"; 3255 | } 3256 | 3257 | .md-local-restaurant:before { 3258 | content: "\f282"; 3259 | } 3260 | 3261 | .md-local-see:before { 3262 | content: "\f283"; 3263 | } 3264 | 3265 | .md-local-shipping:before { 3266 | content: "\f284"; 3267 | } 3268 | 3269 | .md-local-taxi:before { 3270 | content: "\f285"; 3271 | } 3272 | 3273 | .md-location-history:before { 3274 | content: "\f286"; 3275 | } 3276 | 3277 | .md-map:before { 3278 | content: "\f287"; 3279 | } 3280 | 3281 | .md-my-location:before { 3282 | content: "\f288"; 3283 | } 3284 | 3285 | .md-navigation:before { 3286 | content: "\f289"; 3287 | } 3288 | 3289 | .md-pin-drop:before { 3290 | content: "\f28a"; 3291 | } 3292 | 3293 | .md-place:before { 3294 | content: "\f28b"; 3295 | } 3296 | 3297 | .md-rate-review:before { 3298 | content: "\f28c"; 3299 | } 3300 | 3301 | .md-restaurant-menu:before { 3302 | content: "\f28d"; 3303 | } 3304 | 3305 | .md-satellite:before { 3306 | content: "\f28e"; 3307 | } 3308 | 3309 | .md-store-mall-directory:before { 3310 | content: "\f28f"; 3311 | } 3312 | 3313 | .md-terrain:before { 3314 | content: "\f290"; 3315 | } 3316 | 3317 | .md-traffic:before { 3318 | content: "\f291"; 3319 | } 3320 | 3321 | .md-apps:before { 3322 | content: "\f292"; 3323 | } 3324 | 3325 | .md-cancel:before { 3326 | content: "\f293"; 3327 | } 3328 | 3329 | .md-arrow-drop-down-circle:before { 3330 | content: "\f294"; 3331 | } 3332 | 3333 | .md-arrow-drop-down:before { 3334 | content: "\f295"; 3335 | } 3336 | 3337 | .md-arrow-drop-up:before { 3338 | content: "\f296"; 3339 | } 3340 | 3341 | .md-arrow-back:before { 3342 | content: "\f297"; 3343 | } 3344 | 3345 | .md-arrow-forward:before { 3346 | content: "\f298"; 3347 | } 3348 | 3349 | .md-check:before { 3350 | content: "\f299"; 3351 | } 3352 | 3353 | .md-close:before { 3354 | content: "\f29a"; 3355 | } 3356 | 3357 | .md-chevron-left:before { 3358 | content: "\f29b"; 3359 | } 3360 | 3361 | .md-chevron-right:before { 3362 | content: "\f29c"; 3363 | } 3364 | 3365 | .md-expand-less:before { 3366 | content: "\f29d"; 3367 | } 3368 | 3369 | .md-expand-more:before { 3370 | content: "\f29e"; 3371 | } 3372 | 3373 | .md-fullscreen:before { 3374 | content: "\f29f"; 3375 | } 3376 | 3377 | .md-fullscreen-exit:before { 3378 | content: "\f2a0"; 3379 | } 3380 | 3381 | .md-menu:before { 3382 | content: "\f2a1"; 3383 | } 3384 | 3385 | .md-more-horiz:before { 3386 | content: "\f2a2"; 3387 | } 3388 | 3389 | .md-more-vert:before { 3390 | content: "\f2a3"; 3391 | } 3392 | 3393 | .md-refresh:before { 3394 | content: "\f2a4"; 3395 | } 3396 | 3397 | .md-unfold-less:before { 3398 | content: "\f2a5"; 3399 | } 3400 | 3401 | .md-unfold-more:before { 3402 | content: "\f2a6"; 3403 | } 3404 | 3405 | .md-adb:before { 3406 | content: "\f2a7"; 3407 | } 3408 | 3409 | .md-bluetooth-audio:before { 3410 | content: "\f2a8"; 3411 | } 3412 | 3413 | .md-disc-full:before { 3414 | content: "\f2a9"; 3415 | } 3416 | 3417 | .md-dnd-forwardslash:before { 3418 | content: "\f2aa"; 3419 | } 3420 | 3421 | .md-do-not-disturb:before { 3422 | content: "\f2ab"; 3423 | } 3424 | 3425 | .md-drive-eta:before { 3426 | content: "\f2ac"; 3427 | } 3428 | 3429 | .md-event-available:before { 3430 | content: "\f2ad"; 3431 | } 3432 | 3433 | .md-event-busy:before { 3434 | content: "\f2ae"; 3435 | } 3436 | 3437 | .md-event-note:before { 3438 | content: "\f2af"; 3439 | } 3440 | 3441 | .md-folder-special:before { 3442 | content: "\f2b0"; 3443 | } 3444 | 3445 | .md-mms:before { 3446 | content: "\f2b1"; 3447 | } 3448 | 3449 | .md-more:before { 3450 | content: "\f2b2"; 3451 | } 3452 | 3453 | .md-network-locked:before { 3454 | content: "\f2b3"; 3455 | } 3456 | 3457 | .md-phone-bluetooth-speaker:before { 3458 | content: "\f2b4"; 3459 | } 3460 | 3461 | .md-phone-forwarded:before { 3462 | content: "\f2b5"; 3463 | } 3464 | 3465 | .md-phone-in-talk:before { 3466 | content: "\f2b6"; 3467 | } 3468 | 3469 | .md-phone-locked:before { 3470 | content: "\f2b7"; 3471 | } 3472 | 3473 | .md-phone-missed:before { 3474 | content: "\f2b8"; 3475 | } 3476 | 3477 | .md-phone-paused:before { 3478 | content: "\f2b9"; 3479 | } 3480 | 3481 | .md-play-download:before { 3482 | content: "\f2ba"; 3483 | } 3484 | 3485 | .md-play-install:before { 3486 | content: "\f2bb"; 3487 | } 3488 | 3489 | .md-sd-card:before { 3490 | content: "\f2bc"; 3491 | } 3492 | 3493 | .md-sim-card-alert:before { 3494 | content: "\f2bd"; 3495 | } 3496 | 3497 | .md-sms:before { 3498 | content: "\f2be"; 3499 | } 3500 | 3501 | .md-sms-failed:before { 3502 | content: "\f2bf"; 3503 | } 3504 | 3505 | .md-sync:before { 3506 | content: "\f2c0"; 3507 | } 3508 | 3509 | .md-sync-disabled:before { 3510 | content: "\f2c1"; 3511 | } 3512 | 3513 | .md-sync-problem:before { 3514 | content: "\f2c2"; 3515 | } 3516 | 3517 | .md-system-update:before { 3518 | content: "\f2c3"; 3519 | } 3520 | 3521 | .md-tap-and-play:before { 3522 | content: "\f2c4"; 3523 | } 3524 | 3525 | .md-time-to-leave:before { 3526 | content: "\f2c5"; 3527 | } 3528 | 3529 | .md-vibration:before { 3530 | content: "\f2c6"; 3531 | } 3532 | 3533 | .md-voice-chat:before { 3534 | content: "\f2c7"; 3535 | } 3536 | 3537 | .md-vpn-lock:before { 3538 | content: "\f2c8"; 3539 | } 3540 | 3541 | .md-cake:before { 3542 | content: "\f2c9"; 3543 | } 3544 | 3545 | .md-domain:before { 3546 | content: "\f2ca"; 3547 | } 3548 | 3549 | .md-location-city:before { 3550 | content: "\f2cb"; 3551 | } 3552 | 3553 | .md-mood:before { 3554 | content: "\f2cc"; 3555 | } 3556 | 3557 | .md-notifications-none:before { 3558 | content: "\f2cd"; 3559 | } 3560 | 3561 | .md-notifications:before { 3562 | content: "\f2ce"; 3563 | } 3564 | 3565 | .md-notifications-off:before { 3566 | content: "\f2cf"; 3567 | } 3568 | 3569 | .md-notifications-on:before { 3570 | content: "\f2d0"; 3571 | } 3572 | 3573 | .md-notifications-paused:before { 3574 | content: "\f2d1"; 3575 | } 3576 | 3577 | .md-pages:before { 3578 | content: "\f2d2"; 3579 | } 3580 | 3581 | .md-party-mode:before { 3582 | content: "\f2d3"; 3583 | } 3584 | 3585 | .md-group:before { 3586 | content: "\f2d4"; 3587 | } 3588 | 3589 | .md-group-add:before { 3590 | content: "\f2d5"; 3591 | } 3592 | 3593 | .md-people:before { 3594 | content: "\f2d6"; 3595 | } 3596 | 3597 | .md-people-outline:before { 3598 | content: "\f2d7"; 3599 | } 3600 | 3601 | .md-person:before { 3602 | content: "\f2d8"; 3603 | } 3604 | 3605 | .md-person-add:before { 3606 | content: "\f2d9"; 3607 | } 3608 | 3609 | .md-person-outline:before { 3610 | content: "\f2da"; 3611 | } 3612 | 3613 | .md-plus-one:before { 3614 | content: "\f2db"; 3615 | } 3616 | 3617 | .md-poll:before { 3618 | content: "\f2dc"; 3619 | } 3620 | 3621 | .md-public:before { 3622 | content: "\f2dd"; 3623 | } 3624 | 3625 | .md-school:before { 3626 | content: "\f2de"; 3627 | } 3628 | 3629 | .md-share:before { 3630 | content: "\f2df"; 3631 | } 3632 | 3633 | .md-whatshot:before { 3634 | content: "\f2e0"; 3635 | } 3636 | 3637 | .md-check-box:before { 3638 | content: "\f2e1"; 3639 | } 3640 | 3641 | .md-check-box-outline-blank:before { 3642 | content: "\f2e2"; 3643 | } 3644 | 3645 | .md-radio-button-off:before { 3646 | content: "\f2e3"; 3647 | } 3648 | 3649 | .md-radio-button-on:before { 3650 | content: "\f2e4"; 3651 | } 3652 | 3653 | .md-star:before { 3654 | content: "\f2e5"; 3655 | } 3656 | 3657 | .md-star-half:before { 3658 | content: "\f2e6"; 3659 | } 3660 | 3661 | .md-star-outline:before { 3662 | content: "\f2e7"; 3663 | } 3664 | 3665 | /* ============================================================================= 3666 | FUSION ADS 3667 | ============================================================================= */ 3668 | #fusionads { 3669 | display: none; 3670 | position: fixed; 3671 | top: 12px; 3672 | right: 12px; 3673 | z-index: 5; 3674 | padding: 12px; 3675 | background: rgba(255, 255, 255, 0.95); 3676 | font-size: 12px; 3677 | line-height: 1.2; 3678 | box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.1); 3679 | } 3680 | 3681 | #fusionads .fusion-wrap { 3682 | display: block; 3683 | margin: 0 auto 10px auto; 3684 | width: 130px; 3685 | } 3686 | 3687 | #fusionads a.fusion-text { 3688 | display: block; 3689 | color: #727272; 3690 | text-decoration: none; 3691 | } 3692 | 3693 | #fusionads a.fusion-img { 3694 | display: block; 3695 | margin-bottom: 10px; 3696 | width: 130px; 3697 | height: 100px; 3698 | background-color: #fff; 3699 | } 3700 | 3701 | #fusionads a.fusion-img img { 3702 | display: block; 3703 | margin: 0 0 12px 0; 3704 | } 3705 | 3706 | #fusionads a.fusion-poweredby { 3707 | color: #CDDC39; 3708 | text-decoration: none; 3709 | } 3710 | 3711 | @media all and (min-width: 600px) { 3712 | #fusionads { 3713 | display: block; 3714 | } 3715 | } 3716 | -------------------------------------------------------------------------------- /css/style.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | Title: TITLE 3 | Author: Nick Salloum 4 | Author URI: http://callmenick.com/ 5 | Description: My theme 6 | Version: 0.1.0 7 | */a,article,aside,body,div,em,figcaption,figure,footer,h1,h2,h3,h4,h5,h6,header,html,img,li,nav,ol,p,section,small,span,strong,ul{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,figcaption,figure,footer,header,main,nav,section{display:block}ol,ul{list-style:none;margin:0;padding:0}button{margin:0;padding:0;color:inherit;font-family:inherit;font-size:inherit;background:0 0;border:none;border-radius:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;cursor:pointer}*,::after,::before{box-sizing:border-box}.clearfix::after{content:"";display:table;clear:both}body{color:#727272;background-color:#fff;font-family:Roboto,sans-serif;font-size:16px;font-weight:300;line-height:1.6}body.mm-menu-open{overflow:hidden}h1,h2,h3,h4,h5,h6{margin-bottom:22px;color:#212121;line-height:1}h1{font-size:36px}h2{font-size:22px}p{margin-bottom:22px}p:last-child{margin-bottom:0}a{color:#CDDC39;text-decoration:none}.wrapper{z-index:5;-webkit-transition:-webkit-transform .5s;transition:transform .5s}.wrapper.mm-menu-open{-webkit-transform:translateX(300px);-ms-transform:translateX(300px);transform:translateX(300px)}.container{padding:0 72px}main{padding:36px 0}section{margin-bottom:36px}.header{padding:24px 0;text-align:center}.header__title{margin:0}.mm-menu-toggle{position:fixed;top:12px;left:12px;z-index:20;width:24px;height:18px;background:-webkit-linear-gradient(90deg,rgba(33,33,33,0),rgba(33,33,33,0) 7px,#212121 7px,#212121 11px,rgba(33,33,33,0) 11px,rgba(33,33,33,0) 18px);background:linear-gradient(0deg,rgba(33,33,33,0),rgba(33,33,33,0) 7px,#212121 7px,#212121 11px,rgba(33,33,33,0) 11px,rgba(33,33,33,0) 18px);font-size:0;text-indent:-9999px}.mm-menu-toggle::after,.mm-menu-toggle::before{display:block;position:absolute;left:0;width:100%;height:4px;background-color:#212121;content:""}.mm-menu-toggle::before{top:0;-webkit-transform-origin:bottom left;-ms-transform-origin:bottom left;transform-origin:bottom left}.mm-menu-toggle::after{bottom:0;-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left}.mm-menu-toggle,.mm-menu-toggle::after,.mm-menu-toggle::before{-webkit-transition:all .5s;transition:all .5s}.mm-menu-toggle.active{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}.mm-menu-toggle.active::before{width:75%;-webkit-transform:translateY(7px) rotate(-45deg);-ms-transform:translateY(7px) rotate(-45deg);transform:translateY(7px) rotate(-45deg)}.mm-menu-toggle.active::after{width:75%;-webkit-transform:translateY(-7px) rotate(45deg);-ms-transform:translateY(-7px) rotate(45deg);transform:translateY(-7px) rotate(45deg)}.mm-menu{position:fixed;top:0;left:0;z-index:10;background-color:#fff;width:100%;height:100%;overflow-y:auto;box-shadow:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:-webkit-transform .5s,box-shadow .5s;transition:transform .5s,box-shadow .5s}.mm-menu.active{box-shadow:0 2px 8px rgba(0,0,0,.2);-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}@media all and (min-width:300px){.mm-menu{width:300px;-webkit-transform:translateX(-300px);-ms-transform:translateX(-300px);transform:translateX(-300px)}}.mm-menu__header{position:relative;width:100%;height:188px;background-color:#CDDC39}.mm-menu__title{position:absolute;bottom:12px;left:12px;margin:0;padding:0;color:#fff;font-size:22px}.mm-menu__items{list-style:none;margin:0;padding:0}.mm-menu__item{display:block;width:100%;opacity:0;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.mm-menu__item.in-view{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.mm-menu__item.item-1{-webkit-transition:opacity .5s .1s,-webkit-transform .5s .1s;transition:opacity .5s .1s,transform .5s .1s}.mm-menu__item.item-2{-webkit-transition:opacity .5s .2s,-webkit-transform .5s .2s;transition:opacity .5s .2s,transform .5s .2s}.mm-menu__item.item-3{-webkit-transition:opacity .5s .3s,-webkit-transform .5s .3s;transition:opacity .5s .3s,transform .5s .3s}.mm-menu__item.item-4{-webkit-transition:opacity .5s .4s,-webkit-transform .5s .4s;transition:opacity .5s .4s,transform .5s .4s}.mm-menu__item.item-5{-webkit-transition:opacity .5s .5s,-webkit-transform .5s .5s;transition:opacity .5s .5s,transform .5s .5s}.mm-menu__item.item-6{-webkit-transition:opacity .5s .6s,-webkit-transform .5s .6s;transition:opacity .5s .6s,transform .5s .6s}.mm-menu__item.item-7{-webkit-transition:opacity .5s .7s,-webkit-transform .5s .7s;transition:opacity .5s .7s,transform .5s .7s}.mm-menu__item.item-8{-webkit-transition:opacity .5s .8s,-webkit-transform .5s .8s;transition:opacity .5s .8s,transform .5s .8s}.mm-menu__item.item-9{-webkit-transition:opacity .5s .9s,-webkit-transform .5s .9s;transition:opacity .5s .9s,transform .5s .9s}.mm-menu__item.item-10{-webkit-transition:opacity .5s 1s,-webkit-transform .5s 1s;transition:opacity .5s 1s,transform .5s 1s}.mm-menu__item.item-11{-webkit-transition:opacity .5s 1.1s,-webkit-transform .5s 1.1s;transition:opacity .5s 1.1s,transform .5s 1.1s}.mm-menu__item.item-12{-webkit-transition:opacity .5s 1.2s,-webkit-transform .5s 1.2s;transition:opacity .5s 1.2s,transform .5s 1.2s}.mm-menu__item.item-13{-webkit-transition:opacity .5s 1.3s,-webkit-transform .5s 1.3s;transition:opacity .5s 1.3s,transform .5s 1.3s}.mm-menu__item.item-14{-webkit-transition:opacity .5s 1.4s,-webkit-transform .5s 1.4s;transition:opacity .5s 1.4s,transform .5s 1.4s}.mm-menu__item.item-15{-webkit-transition:opacity .5s 1.5s,-webkit-transform .5s 1.5s;transition:opacity .5s 1.5s,transform .5s 1.5s}.mm-menu__item.item-16{-webkit-transition:opacity .5s 1.6s,-webkit-transform .5s 1.6s;transition:opacity .5s 1.6s,transform .5s 1.6s}.mm-menu__item.item-17{-webkit-transition:opacity .5s 1.7s,-webkit-transform .5s 1.7s;transition:opacity .5s 1.7s,transform .5s 1.7s}.mm-menu__item.item-18{-webkit-transition:opacity .5s 1.8s,-webkit-transform .5s 1.8s;transition:opacity .5s 1.8s,transform .5s 1.8s}.mm-menu__item.item-19{-webkit-transition:opacity .5s 1.9s,-webkit-transform .5s 1.9s;transition:opacity .5s 1.9s,transform .5s 1.9s}.mm-menu__item.item-20{-webkit-transition:opacity .5s 2s,-webkit-transform .5s 2s;transition:opacity .5s 2s,transform .5s 2s}.mm-menu__link{display:block;position:relative;overflow:hidden;margin:4px 0;padding:12px;color:#727272;font-size:16px;text-decoration:none;-webkit-transition:background .5s,color .5s;transition:background .5s,color .5s}.mm-menu__link-text{position:relative;z-index:2}.mm-menu__link--touch-effect{display:block;position:absolute;z-index:1;width:0;height:0;border-radius:100%;background-color:#B6B6B6;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}.mm-menu__link--touch-effect.animating{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform .5s;transition:transform .5s}.mm-menu-mask{display:block;position:fixed;top:0;left:0;z-index:8;width:100%;height:100%;background-color:rgba(0,0,0,.8);visibility:hidden;opacity:0;-webkit-transition:opacity .5s,visibility .5s;transition:opacity .5s,visibility .5s}.mm-menu-mask.active{visibility:visible;opacity:1}/*! 8 | * Material Design Iconic Font 1.0.1 by Sergey Kupletsky (@zavoloklom) - http://zavoloklom.github.io/material-design-iconic-font/ 9 | * License - https://github.com/zavoloklom/material-design-iconic-font/blob/gh-pages/License.md (Attribution-ShareAlike 4.0 International license) 10 | */@font-face{font-family:'Material Design Iconic Font';src:url(../fonts/Material-Design-Iconic-Font.eot?v=1.0.1);src:url(../fonts/Material-Design-Iconic-Font.eot?#iefix&v=1.0.1) format("embedded-opentype"),url(../fonts/Material-Design-Iconic-Font.woff?v=1.0.1) format("woff"),url(../fonts/Material-Design-Iconic-Font.ttf?v=1.0.1) format("truetype"),url(../fonts/Material-Design-Iconic-Font.svg?v=1.0.1#Material-Design-Iconic-Font) format("svg");font-weight:400;font-style:normal}[class*=" md-"],[class^=md-]{display:inline-block;font:normal normal normal 14px/1 'Material Design Iconic Font';font-size:inherit;speak:none;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.md{line-height:inherit;vertical-align:bottom}.md-lg{font-size:1.5em;line-height:.5em;vertical-align:-35%}.md-2x{font-size:2em}.md-3x{font-size:3em}.md-4x{font-size:4em}.md-5x{font-size:5em}.md-border{padding:.2em .25em .15em;border:.08em solid grey;border-radius:.1em}.md-border-circle{padding:.2em .25em .15em;border:.08em solid grey;border-radius:50%}[class*=" md-"].pull-left,[class^=md-].pull-left{float:left;margin-right:.3em}[class*=" md-"].pull-right,[class^=md-].pull-right{float:right;margin-left:.3em}.md-spin{-webkit-animation:md-spin 1.5s infinite linear;animation:md-spin 1.5s infinite linear}.md-spin-reverse{-webkit-animation:md-spin-reverse 1.5s infinite linear;animation:md-spin-reverse 1.5s infinite linear}@-webkit-keyframes md-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes md-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-webkit-keyframes md-spin-reverse{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(-359deg);transform:rotate(-359deg)}}@keyframes md-spin-reverse{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(-359deg);transform:rotate(-359deg)}}.md-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.md-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.md-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.md-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1)}.md-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);-webkit-transform:scale(1,-1);-ms-transform:scale(1,-1);transform:scale(1,-1)}:root .md-flip-horizontal,:root .md-flip-vertical,:root .md-rotate-180,:root .md-rotate-270,:root .md-rotate-90{-webkit-filter:none;filter:none}.md-3d-rotation:before{content:"\f000"}.md-accessibility:before{content:"\f001"}.md-account-balance:before{content:"\f002"}.md-account-balance-wallet:before{content:"\f003"}.md-account-box:before{content:"\f004"}.md-account-child:before{content:"\f005"}.md-account-circle:before{content:"\f006"}.md-add-shopping-cart:before{content:"\f007"}.md-alarm:before{content:"\f008"}.md-alarm-add:before{content:"\f009"}.md-alarm-off:before{content:"\f00a"}.md-alarm-on:before{content:"\f00b"}.md-android:before{content:"\f00c"}.md-announcement:before{content:"\f00d"}.md-aspect-ratio:before{content:"\f00e"}.md-assessment:before{content:"\f00f"}.md-assignment:before{content:"\f010"}.md-assignment-ind:before{content:"\f011"}.md-assignment-late:before{content:"\f012"}.md-assignment-return:before{content:"\f013"}.md-assignment-returned:before{content:"\f014"}.md-assignment-turned-in:before{content:"\f015"}.md-autorenew:before{content:"\f016"}.md-backup:before{content:"\f017"}.md-book:before{content:"\f018"}.md-bookmark:before{content:"\f019"}.md-bookmark-outline:before{content:"\f01a"}.md-bug-report:before{content:"\f01b"}.md-cached:before{content:"\f01c"}.md-class:before{content:"\f01d"}.md-credit-card:before{content:"\f01e"}.md-dashboard:before{content:"\f01f"}.md-delete:before{content:"\f020"}.md-description:before{content:"\f021"}.md-dns:before{content:"\f022"}.md-done:before{content:"\f023"}.md-done-all:before{content:"\f024"}.md-event:before{content:"\f025"}.md-exit-to-app:before{content:"\f026"}.md-explore:before{content:"\f027"}.md-extension:before{content:"\f028"}.md-face-unlock:before{content:"\f029"}.md-favorite:before{content:"\f02a"}.md-favorite-outline:before{content:"\f02b"}.md-find-in-page:before{content:"\f02c"}.md-find-replace:before{content:"\f02d"}.md-flip-to-back:before{content:"\f02e"}.md-flip-to-front:before{content:"\f02f"}.md-get-app:before{content:"\f030"}.md-grade:before{content:"\f031"}.md-group-work:before{content:"\f032"}.md-help:before{content:"\f033"}.md-highlight-remove:before{content:"\f034"}.md-history:before{content:"\f035"}.md-home:before{content:"\f036"}.md-https:before{content:"\f037"}.md-info:before{content:"\f038"}.md-info-outline:before{content:"\f039"}.md-input:before{content:"\f03a"}.md-invert-colors:before{content:"\f03b"}.md-label:before{content:"\f03c"}.md-label-outline:before{content:"\f03d"}.md-language:before{content:"\f03e"}.md-launch:before{content:"\f03f"}.md-list:before{content:"\f040"}.md-lock:before{content:"\f041"}.md-lock-open:before{content:"\f042"}.md-lock-outline:before{content:"\f043"}.md-loyalty:before{content:"\f044"}.md-markunread-mailbox:before{content:"\f045"}.md-note-add:before{content:"\f046"}.md-open-in-browser:before{content:"\f047"}.md-open-in-new:before{content:"\f048"}.md-open-with:before{content:"\f049"}.md-pageview:before{content:"\f04a"}.md-payment:before{content:"\f04b"}.md-perm-camera-mic:before{content:"\f04c"}.md-perm-contact-cal:before{content:"\f04d"}.md-perm-data-setting:before{content:"\f04e"}.md-perm-device-info:before{content:"\f04f"}.md-perm-identity:before{content:"\f050"}.md-perm-media:before{content:"\f051"}.md-perm-phone-msg:before{content:"\f052"}.md-perm-scan-wifi:before{content:"\f053"}.md-picture-in-picture:before{content:"\f054"}.md-polymer:before{content:"\f055"}.md-print:before{content:"\f056"}.md-query-builder:before{content:"\f057"}.md-question-answer:before{content:"\f058"}.md-receipt:before{content:"\f059"}.md-redeem:before{content:"\f05a"}.md-report-problem:before{content:"\f05b"}.md-restore:before{content:"\f05c"}.md-room:before{content:"\f05d"}.md-schedule:before{content:"\f05e"}.md-search:before{content:"\f05f"}.md-settings:before{content:"\f060"}.md-settings-applications:before{content:"\f061"}.md-settings-backup-restore:before{content:"\f062"}.md-settings-bluetooth:before{content:"\f063"}.md-settings-cell:before{content:"\f064"}.md-settings-display:before{content:"\f065"}.md-settings-ethernet:before{content:"\f066"}.md-settings-input-antenna:before{content:"\f067"}.md-settings-input-component:before{content:"\f068"}.md-settings-input-composite:before{content:"\f069"}.md-settings-input-hdmi:before{content:"\f06a"}.md-settings-input-svideo:before{content:"\f06b"}.md-settings-overscan:before{content:"\f06c"}.md-settings-phone:before{content:"\f06d"}.md-settings-power:before{content:"\f06e"}.md-settings-remote:before{content:"\f06f"}.md-settings-voice:before{content:"\f070"}.md-shop:before{content:"\f071"}.md-shopping-basket:before{content:"\f072"}.md-shopping-cart:before{content:"\f073"}.md-shop-two:before{content:"\f074"}.md-speaker-notes:before{content:"\f075"}.md-spellcheck:before{content:"\f076"}.md-star-rate:before{content:"\f077"}.md-stars:before{content:"\f078"}.md-store:before{content:"\f079"}.md-subject:before{content:"\f07a"}.md-swap-horiz:before{content:"\f07b"}.md-swap-vert:before{content:"\f07c"}.md-swap-vert-circle:before{content:"\f07d"}.md-system-update-tv:before{content:"\f07e"}.md-tab:before{content:"\f07f"}.md-tab-unselected:before{content:"\f080"}.md-theaters:before{content:"\f081"}.md-thumb-down:before{content:"\f082"}.md-thumbs-up-down:before{content:"\f083"}.md-thumb-up:before{content:"\f084"}.md-toc:before{content:"\f085"}.md-today:before{content:"\f086"}.md-track-changes:before{content:"\f087"}.md-translate:before{content:"\f088"}.md-trending-down:before{content:"\f089"}.md-trending-neutral:before{content:"\f08a"}.md-trending-up:before{content:"\f08b"}.md-turned-in:before{content:"\f08c"}.md-turned-in-not:before{content:"\f08d"}.md-verified-user:before{content:"\f08e"}.md-view-agenda:before{content:"\f08f"}.md-view-array:before{content:"\f090"}.md-view-carousel:before{content:"\f091"}.md-view-column:before{content:"\f092"}.md-view-day:before{content:"\f093"}.md-view-headline:before{content:"\f094"}.md-view-list:before{content:"\f095"}.md-view-module:before{content:"\f096"}.md-view-quilt:before{content:"\f097"}.md-view-stream:before{content:"\f098"}.md-view-week:before{content:"\f099"}.md-visibility:before{content:"\f09a"}.md-visibility-off:before{content:"\f09b"}.md-wallet-giftcard:before{content:"\f09c"}.md-wallet-membership:before{content:"\f09d"}.md-wallet-travel:before{content:"\f09e"}.md-work:before{content:"\f09f"}.md-error:before{content:"\f0a0"}.md-warning:before{content:"\f0a1"}.md-album:before{content:"\f0a2"}.md-av-timer:before{content:"\f0a3"}.md-closed-caption:before{content:"\f0a4"}.md-equalizer:before{content:"\f0a5"}.md-explicit:before{content:"\f0a6"}.md-fast-forward:before{content:"\f0a7"}.md-fast-rewind:before{content:"\f0a8"}.md-games:before{content:"\f0a9"}.md-hearing:before{content:"\f0aa"}.md-high-quality:before{content:"\f0ab"}.md-loop:before{content:"\f0ac"}.md-mic:before{content:"\f0ad"}.md-mic-none:before{content:"\f0ae"}.md-mic-off:before{content:"\f0af"}.md-movie:before{content:"\f0b0"}.md-my-library-add:before{content:"\f0b1"}.md-my-library-books:before{content:"\f0b2"}.md-my-library-music:before{content:"\f0b3"}.md-new-releases:before{content:"\f0b4"}.md-not-interested:before{content:"\f0b5"}.md-pause:before{content:"\f0b6"}.md-pause-circle-fill:before{content:"\f0b7"}.md-pause-circle-outline:before{content:"\f0b8"}.md-play-arrow:before{content:"\f0b9"}.md-play-circle-fill:before{content:"\f0ba"}.md-play-circle-outline:before{content:"\f0bb"}.md-playlist-add:before{content:"\f0bc"}.md-play-shopping-bag:before{content:"\f0bd"}.md-queue:before{content:"\f0be"}.md-queue-music:before{content:"\f0bf"}.md-radio:before{content:"\f0c0"}.md-recent-actors:before{content:"\f0c1"}.md-repeat:before{content:"\f0c2"}.md-repeat-one:before{content:"\f0c3"}.md-replay:before{content:"\f0c4"}.md-shuffle:before{content:"\f0c5"}.md-skip-next:before{content:"\f0c6"}.md-skip-previous:before{content:"\f0c7"}.md-snooze:before{content:"\f0c8"}.md-stop:before{content:"\f0c9"}.md-subtitles:before{content:"\f0ca"}.md-surround-sound:before{content:"\f0cb"}.md-videocam:before{content:"\f0cc"}.md-videocam-off:before{content:"\f0cd"}.md-video-collection:before{content:"\f0ce"}.md-volume-down:before{content:"\f0cf"}.md-volume-mute:before{content:"\f0d0"}.md-volume-off:before{content:"\f0d1"}.md-volume-up:before{content:"\f0d2"}.md-web:before{content:"\f0d3"}.md-business:before{content:"\f0d4"}.md-call:before{content:"\f0d5"}.md-call-end:before{content:"\f0d6"}.md-call-made:before{content:"\f0d7"}.md-call-merge:before{content:"\f0d8"}.md-call-missed:before{content:"\f0d9"}.md-call-received:before{content:"\f0da"}.md-call-split:before{content:"\f0db"}.md-chat:before{content:"\f0dc"}.md-clear-all:before{content:"\f0dd"}.md-comment:before{content:"\f0de"}.md-contacts:before{content:"\f0df"}.md-dialer-sip:before{content:"\f0e0"}.md-dialpad:before{content:"\f0e1"}.md-dnd-on:before{content:"\f0e2"}.md-email:before{content:"\f0e3"}.md-forum:before{content:"\f0e4"}.md-import-export:before{content:"\f0e5"}.md-invert-colors-off:before{content:"\f0e6"}.md-invert-colors-on:before{content:"\f0e7"}.md-live-help:before{content:"\f0e8"}.md-location-off:before{content:"\f0e9"}.md-location-on:before{content:"\f0ea"}.md-message:before{content:"\f0eb"}.md-messenger:before{content:"\f0ec"}.md-no-sim:before{content:"\f0ed"}.md-phone:before{content:"\f0ee"}.md-portable-wifi-off:before{content:"\f0ef"}.md-quick-contacts-dialer:before{content:"\f0f0"}.md-quick-contacts-mail:before{content:"\f0f1"}.md-ring-volume:before{content:"\f0f2"}.md-stay-current-landscape:before{content:"\f0f3"}.md-stay-current-portrait:before{content:"\f0f4"}.md-stay-primary-landscape:before{content:"\f0f5"}.md-stay-primary-portrait:before{content:"\f0f6"}.md-swap-calls:before{content:"\f0f7"}.md-textsms:before{content:"\f0f8"}.md-voicemail:before{content:"\f0f9"}.md-vpn-key:before{content:"\f0fa"}.md-add:before{content:"\f0fb"}.md-add-box:before{content:"\f0fc"}.md-add-circle:before{content:"\f0fd"}.md-add-circle-outline:before{content:"\f0fe"}.md-archive:before{content:"\f0ff"}.md-backspace:before{content:"\f100"}.md-block:before{content:"\f101"}.md-clear:before{content:"\f102"}.md-content-copy:before{content:"\f103"}.md-content-cut:before{content:"\f104"}.md-content-paste:before{content:"\f105"}.md-create:before{content:"\f106"}.md-drafts:before{content:"\f107"}.md-filter-list:before{content:"\f108"}.md-flag:before{content:"\f109"}.md-forward:before{content:"\f10a"}.md-gesture:before{content:"\f10b"}.md-inbox:before{content:"\f10c"}.md-link:before{content:"\f10d"}.md-mail:before{content:"\f10e"}.md-markunread:before{content:"\f10f"}.md-redo:before{content:"\f110"}.md-remove:before{content:"\f111"}.md-remove-circle:before{content:"\f112"}.md-remove-circle-outline:before{content:"\f113"}.md-reply:before{content:"\f114"}.md-reply-all:before{content:"\f115"}.md-report:before{content:"\f116"}.md-save:before{content:"\f117"}.md-select-all:before{content:"\f118"}.md-send:before{content:"\f119"}.md-sort:before{content:"\f11a"}.md-text-format:before{content:"\f11b"}.md-undo:before{content:"\f11c"}.md-access-alarm:before{content:"\f11d"}.md-access-alarms:before{content:"\f11e"}.md-access-time:before{content:"\f11f"}.md-add-alarm:before{content:"\f120"}.md-airplanemode-off:before{content:"\f121"}.md-airplanemode-on:before{content:"\f122"}.md-battery-20:before{content:"\f123"}.md-battery-30:before{content:"\f124"}.md-battery-50:before{content:"\f125"}.md-battery-60:before{content:"\f126"}.md-battery-80:before{content:"\f127"}.md-battery-90:before{content:"\f128"}.md-battery-alert:before{content:"\f129"}.md-battery-charging-20:before{content:"\f12a"}.md-battery-charging-30:before{content:"\f12b"}.md-battery-charging-50:before{content:"\f12c"}.md-battery-charging-60:before{content:"\f12d"}.md-battery-charging-80:before{content:"\f12e"}.md-battery-charging-90:before{content:"\f12f"}.md-battery-charging-full:before{content:"\f130"}.md-battery-full:before{content:"\f131"}.md-battery-std:before{content:"\f132"}.md-battery-unknown:before{content:"\f133"}.md-bluetooth:before{content:"\f134"}.md-bluetooth-connected:before{content:"\f135"}.md-bluetooth-disabled:before{content:"\f136"}.md-bluetooth-searching:before{content:"\f137"}.md-brightness-auto:before{content:"\f138"}.md-brightness-high:before{content:"\f139"}.md-brightness-low:before{content:"\f13a"}.md-brightness-medium:before{content:"\f13b"}.md-data-usage:before{content:"\f13c"}.md-developer-mode:before{content:"\f13d"}.md-devices:before{content:"\f13e"}.md-dvr:before{content:"\f13f"}.md-gps-fixed:before{content:"\f140"}.md-gps-not-fixed:before{content:"\f141"}.md-gps-off:before{content:"\f142"}.md-location-disabled:before{content:"\f143"}.md-location-searching:before{content:"\f144"}.md-multitrack-audio:before{content:"\f145"}.md-network-cell:before{content:"\f146"}.md-network-wifi:before{content:"\f147"}.md-nfc:before{content:"\f148"}.md-now-wallpaper:before{content:"\f149"}.md-now-widgets:before{content:"\f14a"}.md-screen-lock-landscape:before{content:"\f14b"}.md-screen-lock-portrait:before{content:"\f14c"}.md-screen-lock-rotation:before{content:"\f14d"}.md-screen-rotation:before{content:"\f14e"}.md-sd-storage:before{content:"\f14f"}.md-settings-system-daydream:before{content:"\f150"}.md-signal-cellular-0-bar:before{content:"\f151"}.md-signal-cellular-1-bar:before{content:"\f152"}.md-signal-cellular-2-bar:before{content:"\f153"}.md-signal-cellular-3-bar:before{content:"\f154"}.md-signal-cellular-4-bar:before{content:"\f155"}.md-signal-cellular-connected-no-internet-0-bar:before{content:"\f156"}.md-signal-cellular-connected-no-internet-1-bar:before{content:"\f157"}.md-signal-cellular-connected-no-internet-2-bar:before{content:"\f158"}.md-signal-cellular-connected-no-internet-3-bar:before{content:"\f159"}.md-signal-cellular-connected-no-internet-4-bar:before{content:"\f15a"}.md-signal-cellular-no-sim:before{content:"\f15b"}.md-signal-cellular-null:before{content:"\f15c"}.md-signal-cellular-off:before{content:"\f15d"}.md-signal-wifi-0-bar:before{content:"\f15e"}.md-signal-wifi-1-bar:before{content:"\f15f"}.md-signal-wifi-2-bar:before{content:"\f160"}.md-signal-wifi-3-bar:before{content:"\f161"}.md-signal-wifi-4-bar:before{content:"\f162"}.md-signal-wifi-off:before{content:"\f163"}.md-storage:before{content:"\f164"}.md-usb:before{content:"\f165"}.md-wifi-lock:before{content:"\f166"}.md-wifi-tethering:before{content:"\f167"}.md-attach-file:before{content:"\f168"}.md-attach-money:before{content:"\f169"}.md-border-all:before{content:"\f16a"}.md-border-bottom:before{content:"\f16b"}.md-border-clear:before{content:"\f16c"}.md-border-color:before{content:"\f16d"}.md-border-horizontal:before{content:"\f16e"}.md-border-inner:before{content:"\f16f"}.md-border-left:before{content:"\f170"}.md-border-outer:before{content:"\f171"}.md-border-right:before{content:"\f172"}.md-border-style:before{content:"\f173"}.md-border-top:before{content:"\f174"}.md-border-vertical:before{content:"\f175"}.md-format-align-center:before{content:"\f176"}.md-format-align-justify:before{content:"\f177"}.md-format-align-left:before{content:"\f178"}.md-format-align-right:before{content:"\f179"}.md-format-bold:before{content:"\f17a"}.md-format-clear:before{content:"\f17b"}.md-format-color-fill:before{content:"\f17c"}.md-format-color-reset:before{content:"\f17d"}.md-format-color-text:before{content:"\f17e"}.md-format-indent-decrease:before{content:"\f17f"}.md-format-indent-increase:before{content:"\f180"}.md-format-italic:before{content:"\f181"}.md-format-line-spacing:before{content:"\f182"}.md-format-list-bulleted:before{content:"\f183"}.md-format-list-numbered:before{content:"\f184"}.md-format-paint:before{content:"\f185"}.md-format-quote:before{content:"\f186"}.md-format-size:before{content:"\f187"}.md-format-strikethrough:before{content:"\f188"}.md-format-textdirection-l-to-r:before{content:"\f189"}.md-format-textdirection-r-to-l:before{content:"\f18a"}.md-format-underline:before{content:"\f18b"}.md-functions:before{content:"\f18c"}.md-insert-chart:before{content:"\f18d"}.md-insert-comment:before{content:"\f18e"}.md-insert-drive-file:before{content:"\f18f"}.md-insert-emoticon:before{content:"\f190"}.md-insert-invitation:before{content:"\f191"}.md-insert-link:before{content:"\f192"}.md-insert-photo:before{content:"\f193"}.md-merge-type:before{content:"\f194"}.md-mode-comment:before{content:"\f195"}.md-mode-edit:before{content:"\f196"}.md-publish:before{content:"\f197"}.md-vertical-align-bottom:before{content:"\f198"}.md-vertical-align-center:before{content:"\f199"}.md-vertical-align-top:before{content:"\f19a"}.md-wrap-text:before{content:"\f19b"}.md-attachment:before{content:"\f19c"}.md-cloud:before{content:"\f19d"}.md-cloud-circle:before{content:"\f19e"}.md-cloud-done:before{content:"\f19f"}.md-cloud-download:before{content:"\f1a0"}.md-cloud-off:before{content:"\f1a1"}.md-cloud-queue:before{content:"\f1a2"}.md-cloud-upload:before{content:"\f1a3"}.md-file-download:before{content:"\f1a4"}.md-file-upload:before{content:"\f1a5"}.md-folder:before{content:"\f1a6"}.md-folder-open:before{content:"\f1a7"}.md-folder-shared:before{content:"\f1a8"}.md-cast:before{content:"\f1a9"}.md-cast-connected:before{content:"\f1aa"}.md-computer:before{content:"\f1ab"}.md-desktop-mac:before{content:"\f1ac"}.md-desktop-windows:before{content:"\f1ad"}.md-dock:before{content:"\f1ae"}.md-gamepad:before{content:"\f1af"}.md-headset:before{content:"\f1b0"}.md-headset-mic:before{content:"\f1b1"}.md-keyboard:before{content:"\f1b2"}.md-keyboard-alt:before{content:"\f1b3"}.md-keyboard-arrow-down:before{content:"\f1b4"}.md-keyboard-arrow-left:before{content:"\f1b5"}.md-keyboard-arrow-right:before{content:"\f1b6"}.md-keyboard-arrow-up:before{content:"\f1b7"}.md-keyboard-backspace:before{content:"\f1b8"}.md-keyboard-capslock:before{content:"\f1b9"}.md-keyboard-control:before{content:"\f1ba"}.md-keyboard-hide:before{content:"\f1bb"}.md-keyboard-return:before{content:"\f1bc"}.md-keyboard-tab:before{content:"\f1bd"}.md-keyboard-voice:before{content:"\f1be"}.md-laptop:before{content:"\f1bf"}.md-laptop-chromebook:before{content:"\f1c0"}.md-laptop-mac:before{content:"\f1c1"}.md-laptop-windows:before{content:"\f1c2"}.md-memory:before{content:"\f1c3"}.md-mouse:before{content:"\f1c4"}.md-phone-android:before{content:"\f1c5"}.md-phone-iphone:before{content:"\f1c6"}.md-phonelink:before{content:"\f1c7"}.md-phonelink-off:before{content:"\f1c8"}.md-security:before{content:"\f1c9"}.md-sim-card:before{content:"\f1ca"}.md-smartphone:before{content:"\f1cb"}.md-speaker:before{content:"\f1cc"}.md-tablet:before{content:"\f1cd"}.md-tablet-android:before{content:"\f1ce"}.md-tablet-mac:before{content:"\f1cf"}.md-tv:before{content:"\f1d0"}.md-watch:before{content:"\f1d1"}.md-add-to-photos:before{content:"\f1d2"}.md-adjust:before{content:"\f1d3"}.md-assistant-photo:before{content:"\f1d4"}.md-audiotrack:before{content:"\f1d5"}.md-blur-circular:before{content:"\f1d6"}.md-blur-linear:before{content:"\f1d7"}.md-blur-off:before{content:"\f1d8"}.md-blur-on:before{content:"\f1d9"}.md-brightness-1:before{content:"\f1da"}.md-brightness-2:before{content:"\f1db"}.md-brightness-3:before{content:"\f1dc"}.md-brightness-4:before{content:"\f1dd"}.md-brightness-5:before{content:"\f1de"}.md-brightness-6:before{content:"\f1df"}.md-brightness-7:before{content:"\f1e0"}.md-brush:before{content:"\f1e1"}.md-camera:before{content:"\f1e2"}.md-camera-alt:before{content:"\f1e3"}.md-camera-front:before{content:"\f1e4"}.md-camera-rear:before{content:"\f1e5"}.md-camera-roll:before{content:"\f1e6"}.md-center-focus-strong:before{content:"\f1e7"}.md-center-focus-weak:before{content:"\f1e8"}.md-collections:before{content:"\f1e9"}.md-colorize:before{content:"\f1ea"}.md-color-lens:before{content:"\f1eb"}.md-compare:before{content:"\f1ec"}.md-control-point:before{content:"\f1ed"}.md-control-point-duplicate:before{content:"\f1ee"}.md-crop:before{content:"\f1ef"}.md-crop-3-2:before{content:"\f1f0"}.md-crop-5-4:before{content:"\f1f1"}.md-crop-7-5:before{content:"\f1f2"}.md-crop-16-9:before{content:"\f1f3"}.md-crop-din:before{content:"\f1f4"}.md-crop-free:before{content:"\f1f5"}.md-crop-landscape:before{content:"\f1f6"}.md-crop-original:before{content:"\f1f7"}.md-crop-portrait:before{content:"\f1f8"}.md-crop-square:before{content:"\f1f9"}.md-dehaze:before{content:"\f1fa"}.md-details:before{content:"\f1fb"}.md-edit:before{content:"\f1fc"}.md-exposure:before{content:"\f1fd"}.md-exposure-minus-1:before{content:"\f1fe"}.md-exposure-minus-2:before{content:"\f1ff"}.md-exposure-zero:before{content:"\f200"}.md-exposure-plus-1:before{content:"\f201"}.md-exposure-plus-2:before{content:"\f202"}.md-filter:before{content:"\f203"}.md-filter-1:before{content:"\f204"}.md-filter-2:before{content:"\f205"}.md-filter-3:before{content:"\f206"}.md-filter-4:before{content:"\f207"}.md-filter-5:before{content:"\f208"}.md-filter-6:before{content:"\f209"}.md-filter-7:before{content:"\f20a"}.md-filter-8:before{content:"\f20b"}.md-filter-9:before{content:"\f20c"}.md-filter-9-plus:before{content:"\f20d"}.md-filter-b-and-w:before{content:"\f20e"}.md-filter-center-focus:before{content:"\f20f"}.md-filter-drama:before{content:"\f210"}.md-filter-frames:before{content:"\f211"}.md-filter-hdr:before{content:"\f212"}.md-filter-none:before{content:"\f213"}.md-filter-tilt-shift:before{content:"\f214"}.md-filter-vintage:before{content:"\f215"}.md-flare:before{content:"\f216"}.md-flash-auto:before{content:"\f217"}.md-flash-off:before{content:"\f218"}.md-flash-on:before{content:"\f219"}.md-flip:before{content:"\f21a"}.md-gradient:before{content:"\f21b"}.md-grain:before{content:"\f21c"}.md-grid-off:before{content:"\f21d"}.md-grid-on:before{content:"\f21e"}.md-hdr-off:before{content:"\f21f"}.md-hdr-on:before{content:"\f220"}.md-hdr-strong:before{content:"\f221"}.md-hdr-weak:before{content:"\f222"}.md-healing:before{content:"\f223"}.md-image:before{content:"\f224"}.md-image-aspect-ratio:before{content:"\f225"}.md-iso:before{content:"\f226"}.md-landscape:before{content:"\f227"}.md-leak-add:before{content:"\f228"}.md-leak-remove:before{content:"\f229"}.md-lens:before{content:"\f22a"}.md-looks:before{content:"\f22b"}.md-looks-1:before{content:"\f22c"}.md-looks-2:before{content:"\f22d"}.md-looks-3:before{content:"\f22e"}.md-looks-4:before{content:"\f22f"}.md-looks-5:before{content:"\f230"}.md-looks-6:before{content:"\f231"}.md-loupe:before{content:"\f232"}.md-movie-creation:before{content:"\f233"}.md-nature:before{content:"\f234"}.md-nature-people:before{content:"\f235"}.md-navigate-before:before{content:"\f236"}.md-navigate-next:before{content:"\f237"}.md-palette:before{content:"\f238"}.md-panorama:before{content:"\f239"}.md-panorama-fisheye:before{content:"\f23a"}.md-panorama-horizontal:before{content:"\f23b"}.md-panorama-vertical:before{content:"\f23c"}.md-panorama-wide-angle:before{content:"\f23d"}.md-photo:before{content:"\f23e"}.md-photo-album:before{content:"\f23f"}.md-photo-camera:before{content:"\f240"}.md-photo-library:before{content:"\f241"}.md-portrait:before{content:"\f242"}.md-remove-red-eye:before{content:"\f243"}.md-rotate-left:before{content:"\f244"}.md-rotate-right:before{content:"\f245"}.md-slideshow:before{content:"\f246"}.md-straighten:before{content:"\f247"}.md-style:before{content:"\f248"}.md-switch-camera:before{content:"\f249"}.md-switch-video:before{content:"\f24a"}.md-tag-faces:before{content:"\f24b"}.md-texture:before{content:"\f24c"}.md-timelapse:before{content:"\f24d"}.md-timer:before{content:"\f24e"}.md-timer-3:before{content:"\f24f"}.md-timer-10:before{content:"\f250"}.md-timer-auto:before{content:"\f251"}.md-timer-off:before{content:"\f252"}.md-tonality:before{content:"\f253"}.md-transform:before{content:"\f254"}.md-tune:before{content:"\f255"}.md-wb-auto:before{content:"\f256"}.md-wb-cloudy:before{content:"\f257"}.md-wb-incandescent:before{content:"\f258"}.md-wb-irradescent:before{content:"\f259"}.md-wb-sunny:before{content:"\f25a"}.md-beenhere:before{content:"\f25b"}.md-directions:before{content:"\f25c"}.md-directions-bike:before{content:"\f25d"}.md-directions-bus:before{content:"\f25e"}.md-directions-car:before{content:"\f25f"}.md-directions-ferry:before{content:"\f260"}.md-directions-subway:before{content:"\f261"}.md-directions-train:before{content:"\f262"}.md-directions-transit:before{content:"\f263"}.md-directions-walk:before{content:"\f264"}.md-flight:before{content:"\f265"}.md-hotel:before{content:"\f266"}.md-layers:before{content:"\f267"}.md-layers-clear:before{content:"\f268"}.md-local-airport:before{content:"\f269"}.md-local-atm:before{content:"\f26a"}.md-local-attraction:before{content:"\f26b"}.md-local-bar:before{content:"\f26c"}.md-local-cafe:before{content:"\f26d"}.md-local-car-wash:before{content:"\f26e"}.md-local-convenience-store:before{content:"\f26f"}.md-local-drink:before{content:"\f270"}.md-local-florist:before{content:"\f271"}.md-local-gas-station:before{content:"\f272"}.md-local-grocery-store:before{content:"\f273"}.md-local-hospital:before{content:"\f274"}.md-local-hotel:before{content:"\f275"}.md-local-laundry-service:before{content:"\f276"}.md-local-library:before{content:"\f277"}.md-local-mall:before{content:"\f278"}.md-local-movies:before{content:"\f279"}.md-local-offer:before{content:"\f27a"}.md-local-parking:before{content:"\f27b"}.md-local-pharmacy:before{content:"\f27c"}.md-local-phone:before{content:"\f27d"}.md-local-pizza:before{content:"\f27e"}.md-local-play:before{content:"\f27f"}.md-local-post-office:before{content:"\f280"}.md-local-print-shop:before{content:"\f281"}.md-local-restaurant:before{content:"\f282"}.md-local-see:before{content:"\f283"}.md-local-shipping:before{content:"\f284"}.md-local-taxi:before{content:"\f285"}.md-location-history:before{content:"\f286"}.md-map:before{content:"\f287"}.md-my-location:before{content:"\f288"}.md-navigation:before{content:"\f289"}.md-pin-drop:before{content:"\f28a"}.md-place:before{content:"\f28b"}.md-rate-review:before{content:"\f28c"}.md-restaurant-menu:before{content:"\f28d"}.md-satellite:before{content:"\f28e"}.md-store-mall-directory:before{content:"\f28f"}.md-terrain:before{content:"\f290"}.md-traffic:before{content:"\f291"}.md-apps:before{content:"\f292"}.md-cancel:before{content:"\f293"}.md-arrow-drop-down-circle:before{content:"\f294"}.md-arrow-drop-down:before{content:"\f295"}.md-arrow-drop-up:before{content:"\f296"}.md-arrow-back:before{content:"\f297"}.md-arrow-forward:before{content:"\f298"}.md-check:before{content:"\f299"}.md-close:before{content:"\f29a"}.md-chevron-left:before{content:"\f29b"}.md-chevron-right:before{content:"\f29c"}.md-expand-less:before{content:"\f29d"}.md-expand-more:before{content:"\f29e"}.md-fullscreen:before{content:"\f29f"}.md-fullscreen-exit:before{content:"\f2a0"}.md-menu:before{content:"\f2a1"}.md-more-horiz:before{content:"\f2a2"}.md-more-vert:before{content:"\f2a3"}.md-refresh:before{content:"\f2a4"}.md-unfold-less:before{content:"\f2a5"}.md-unfold-more:before{content:"\f2a6"}.md-adb:before{content:"\f2a7"}.md-bluetooth-audio:before{content:"\f2a8"}.md-disc-full:before{content:"\f2a9"}.md-dnd-forwardslash:before{content:"\f2aa"}.md-do-not-disturb:before{content:"\f2ab"}.md-drive-eta:before{content:"\f2ac"}.md-event-available:before{content:"\f2ad"}.md-event-busy:before{content:"\f2ae"}.md-event-note:before{content:"\f2af"}.md-folder-special:before{content:"\f2b0"}.md-mms:before{content:"\f2b1"}.md-more:before{content:"\f2b2"}.md-network-locked:before{content:"\f2b3"}.md-phone-bluetooth-speaker:before{content:"\f2b4"}.md-phone-forwarded:before{content:"\f2b5"}.md-phone-in-talk:before{content:"\f2b6"}.md-phone-locked:before{content:"\f2b7"}.md-phone-missed:before{content:"\f2b8"}.md-phone-paused:before{content:"\f2b9"}.md-play-download:before{content:"\f2ba"}.md-play-install:before{content:"\f2bb"}.md-sd-card:before{content:"\f2bc"}.md-sim-card-alert:before{content:"\f2bd"}.md-sms:before{content:"\f2be"}.md-sms-failed:before{content:"\f2bf"}.md-sync:before{content:"\f2c0"}.md-sync-disabled:before{content:"\f2c1"}.md-sync-problem:before{content:"\f2c2"}.md-system-update:before{content:"\f2c3"}.md-tap-and-play:before{content:"\f2c4"}.md-time-to-leave:before{content:"\f2c5"}.md-vibration:before{content:"\f2c6"}.md-voice-chat:before{content:"\f2c7"}.md-vpn-lock:before{content:"\f2c8"}.md-cake:before{content:"\f2c9"}.md-domain:before{content:"\f2ca"}.md-location-city:before{content:"\f2cb"}.md-mood:before{content:"\f2cc"}.md-notifications-none:before{content:"\f2cd"}.md-notifications:before{content:"\f2ce"}.md-notifications-off:before{content:"\f2cf"}.md-notifications-on:before{content:"\f2d0"}.md-notifications-paused:before{content:"\f2d1"}.md-pages:before{content:"\f2d2"}.md-party-mode:before{content:"\f2d3"}.md-group:before{content:"\f2d4"}.md-group-add:before{content:"\f2d5"}.md-people:before{content:"\f2d6"}.md-people-outline:before{content:"\f2d7"}.md-person:before{content:"\f2d8"}.md-person-add:before{content:"\f2d9"}.md-person-outline:before{content:"\f2da"}.md-plus-one:before{content:"\f2db"}.md-poll:before{content:"\f2dc"}.md-public:before{content:"\f2dd"}.md-school:before{content:"\f2de"}.md-share:before{content:"\f2df"}.md-whatshot:before{content:"\f2e0"}.md-check-box:before{content:"\f2e1"}.md-check-box-outline-blank:before{content:"\f2e2"}.md-radio-button-off:before{content:"\f2e3"}.md-radio-button-on:before{content:"\f2e4"}.md-star:before{content:"\f2e5"}.md-star-half:before{content:"\f2e6"}.md-star-outline:before{content:"\f2e7"}#fusionads{display:none;position:fixed;top:12px;right:12px;z-index:5;padding:12px;background:rgba(255,255,255,.95);font-size:12px;line-height:1.2;box-shadow:-2px 2px 4px rgba(0,0,0,.1)}#fusionads .fusion-wrap{display:block;margin:0 auto 10px;width:130px}#fusionads a.fusion-text{display:block;color:#727272;text-decoration:none}#fusionads a.fusion-img{display:block;margin-bottom:10px;width:130px;height:100px;background-color:#fff}#fusionads a.fusion-img img{display:block;margin:0 0 12px}#fusionads a.fusion-poweredby{color:#CDDC39;text-decoration:none}@media all and (min-width:600px){#fusionads{display:block}} -------------------------------------------------------------------------------- /fonts/Material-Design-Iconic-Font.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callmenick/Material-Menu/5e8ce702f7d6068bafa5c756a3ec67603db54637/fonts/Material-Design-Iconic-Font.eot -------------------------------------------------------------------------------- /fonts/Material-Design-Iconic-Font.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callmenick/Material-Menu/5e8ce702f7d6068bafa5c756a3ec67603db54637/fonts/Material-Design-Iconic-Font.ttf -------------------------------------------------------------------------------- /fonts/Material-Design-Iconic-Font.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callmenick/Material-Menu/5e8ce702f7d6068bafa5c756a3ec67603db54637/fonts/Material-Design-Iconic-Font.woff -------------------------------------------------------------------------------- /img/material-menu-featured.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callmenick/Material-Menu/5e8ce702f7d6068bafa5c756a3ec67603db54637/img/material-menu-featured.jpg -------------------------------------------------------------------------------- /img/mm-header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callmenick/Material-Menu/5e8ce702f7d6068bafa5c756a3ec67603db54637/img/mm-header.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Material Design Off Canvas Menu with HTML5, CSS3, and JavaScript 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 |

My App

23 |
24 |
25 |
26 |
27 |
28 |

Material Menu

29 |
30 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius esse corporis, velit porro impedit laudantium accusamus! Id velit, illum magni rem mollitia blanditiis iste maiores optio ipsa, est dolorem fugit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam repellendus odio consequatur, iure fuga, saepe sed, eum deserunt error praesentium enim provident qui voluptatibus rerum expedita blanditiis dicta nobis alias. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa qui consequuntur eius aliquam, rerum deleniti. Ipsam neque, nam cumque, sunt, labore autem perferendis suscipit voluptatum praesentium dolores aspernatur quae assumenda.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ea nihil dolorem sapiente ullam obcaecati ipsam omnis, commodi ratione atque aliquid suscipit harum asperiores voluptate accusantium, temporibus saepe fugit iusto.

31 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius esse corporis, velit porro impedit laudantium accusamus! Id velit, illum magni rem mollitia blanditiis iste maiores optio ipsa, est dolorem fugit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam repellendus odio consequatur, iure fuga, saepe sed, eum deserunt error praesentium enim provident qui voluptatibus rerum expedita blanditiis dicta nobis alias. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa qui consequuntur eius aliquam, rerum deleniti. Ipsam neque, nam cumque, sunt, labore autem perferendis suscipit voluptatum praesentium dolores aspernatur quae assumenda.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ea nihil dolorem sapiente ullam obcaecati ipsam omnis, commodi ratione atque aliquid suscipit harum asperiores voluptate accusantium, temporibus saepe fugit iusto.

32 |
33 |
34 |

Download & Credits

35 |

Get the code here - https://github.com/callmenick/Material-Menu

36 |

Built By - Call Me Nick

37 |
38 |
39 |
40 |
41 | 42 | 43 | 75 | 76 | 77 | 80 | 81 | 82 | 83 | 84 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /js/development/materialMenu.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Material Menu 3 | * 4 | * The functionality for an off canvas menu, inspired by Google's material 5 | * design. 6 | * 7 | * Licensed under the MIT license. 8 | * http://www.opensource.org/licenses/mit-license.php 9 | * 10 | * Copyright 2014, Call Me Nick 11 | * http://callmenick.com 12 | */ 13 | 14 | (function( window ) { 15 | 16 | "use strict"; 17 | 18 | ////////////////////////////////////////////////////////////////////////////// 19 | ////////////////////////////////////////////////////////////////////////////// 20 | // 21 | // T R A N S I T I O N E N D E V E N T S 22 | // http://davidwalsh.name/css-animation-callback 23 | // 24 | ////////////////////////////////////////////////////////////////////////////// 25 | ////////////////////////////////////////////////////////////////////////////// 26 | 27 | function whichTransitionEvent(){ 28 | var t, 29 | el = document.createElement("fakeelement"); 30 | 31 | var transitions = { 32 | "transition" : "transitionend", 33 | "OTransition" : "oTransitionEnd", 34 | "MozTransition" : "transitionend", 35 | "WebkitTransition": "webkitTransitionEnd" 36 | } 37 | 38 | for (t in transitions){ 39 | if (el.style[t] !== undefined){ 40 | return transitions[t]; 41 | } 42 | } 43 | } 44 | var transitionEvent = whichTransitionEvent(); 45 | 46 | ////////////////////////////////////////////////////////////////////////////// 47 | ////////////////////////////////////////////////////////////////////////////// 48 | // 49 | // H E L P E R F U N C T I O N S 50 | // 51 | ////////////////////////////////////////////////////////////////////////////// 52 | ////////////////////////////////////////////////////////////////////////////// 53 | 54 | /** 55 | * Helper function `getPosition` 56 | * 57 | * Get's the position based on event/element. 58 | */ 59 | 60 | function getPosition(e) { 61 | var posx = 0; 62 | var posy = 0; 63 | if (!e) var e = window.event; 64 | if (e.pageX || e.pageY) { 65 | posx = e.pageX; 66 | posy = e.pageY; 67 | } 68 | else if (e.clientX || e.clientY) { 69 | posx = e.clientX + document.body.scrollLeft 70 | + document.documentElement.scrollLeft; 71 | posy = e.clientY + document.body.scrollTop 72 | + document.documentElement.scrollTop; 73 | } 74 | return { 75 | x: posx, 76 | y: posy 77 | } 78 | } 79 | 80 | /** 81 | * Helper function `getOffsetRect` 82 | * 83 | * Get's the position based on event/element. 84 | */ 85 | 86 | function getOffsetRect(elem) { 87 | var box = elem.getBoundingClientRect() 88 | 89 | var body = document.body; 90 | var docElem = document.documentElement; 91 | 92 | var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop; 93 | var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft; 94 | 95 | var clientTop = docElem.clientTop || body.clientTop || 0; 96 | var clientLeft = docElem.clientLeft || body.clientLeft || 0; 97 | 98 | var top = box.top + scrollTop - clientTop; 99 | var left = box.left + scrollLeft - clientLeft; 100 | 101 | return { 102 | x: Math.round(left), 103 | y: Math.round(top) 104 | } 105 | } 106 | 107 | ////////////////////////////////////////////////////////////////////////////// 108 | ////////////////////////////////////////////////////////////////////////////// 109 | // 110 | // M E N U C O M P O N E N T 111 | // 112 | ////////////////////////////////////////////////////////////////////////////// 113 | ////////////////////////////////////////////////////////////////////////////// 114 | 115 | /** 116 | * Menu 117 | * 118 | * Constructor function. Cache some vars and get ready for takeoff and menu 119 | * magic. 120 | */ 121 | 122 | function Menu() { 123 | this.body = document.body; 124 | this.wrapper = document.querySelector("#wrapper"); 125 | this.toggle = document.querySelector("#mm-menu-toggle"); 126 | this.menu = document.querySelector("#mm-menu"); 127 | this.menuItems = this.menu.querySelectorAll("li"); 128 | this.menuItemLinks = this.menu.querySelectorAll("a"); 129 | this.menuPosition = "off"; 130 | this.mask = document.createElement("div"); 131 | this.mask.className = "mm-menu-mask"; 132 | document.body.appendChild(this.mask); 133 | this._init(); 134 | } 135 | 136 | /** 137 | * Menu `_init` 138 | * 139 | * Initialise some stuff for the menu, like transition/animation delays and 140 | * all that funky jazz. Then get ready for events. 141 | */ 142 | 143 | Menu.prototype._init = function() { 144 | this._initToggleEvents(); 145 | this._initItemTransitions(); 146 | this._initTouchEffect(); 147 | this._initMaskEvents(); 148 | }; 149 | 150 | /** 151 | * Menu `_initEvents` 152 | * 153 | * Get ready for the events taking place. Mainly just the pressing of the 154 | * toggle button. 155 | */ 156 | 157 | Menu.prototype._initToggleEvents = function() { 158 | var scope = this; 159 | this.toggle.addEventListener( "click", function() { 160 | (scope.menuPosition == "off") ? scope._toggleMenuOn() : scope._toggleMenuOff(); 161 | }); 162 | }; 163 | 164 | /** 165 | * Menu `_toggleMenuOn` 166 | * 167 | * Toggles the menu into "on" position. 168 | */ 169 | 170 | Menu.prototype._toggleMenuOn = function() { 171 | var scope = this; 172 | 173 | this.body.classList.add("mm-menu-open"); 174 | this.wrapper.classList.add("mm-menu-open"); 175 | this.toggle.classList.add("active"); 176 | this.menu.classList.add("active"); 177 | 178 | for ( var i = 0; i < scope.menuItems.length; i++ ) { 179 | var item = scope.menuItems[i]; 180 | (function( item ) { 181 | item.classList.add("in-view"); 182 | })( item ); 183 | } 184 | 185 | this.mask.classList.add("active"); 186 | this.menuPosition = "on"; 187 | }; 188 | 189 | /** 190 | * Menu `_toggleMenuOff` 191 | * 192 | * Toggles the menu into "off" position. 193 | */ 194 | 195 | Menu.prototype._toggleMenuOff = function() { 196 | var scope = this; 197 | 198 | this.body.classList.remove("mm-menu-open"); 199 | this.wrapper.classList.remove("mm-menu-open"); 200 | this.toggle.classList.remove("active"); 201 | this.menu.classList.remove("active"); 202 | 203 | for ( var i = 0; i < scope.menuItems.length; i++ ) { 204 | var item = scope.menuItems[i]; 205 | (function( item ) { 206 | item.classList.remove("in-view"); 207 | })( item ); 208 | } 209 | 210 | this.mask.classList.remove("active"); 211 | this.menuPosition = "off"; 212 | }; 213 | 214 | /** 215 | * Menu `_initItemTransitions` 216 | * 217 | * Initialise the item transistions. Items transition into view as if they 218 | * are being pulled one by one, giving a neat effect. For this to take place, 219 | * we need to add a necessary class to each item menu. The classes are 220 | * named sequentially, and more can be added in the CSS. 221 | */ 222 | 223 | Menu.prototype._initItemTransitions = function() { 224 | var scope = this; 225 | var len = this.menuItems.length; 226 | for ( var i = 0; i < len; i++ ) { 227 | var num = i+1; 228 | var menuItem = this.menuItems[i]; 229 | this._itemTransitionHandler( menuItem, num ); 230 | } 231 | }; 232 | 233 | /** 234 | * Menu `_itemTransitionHandler` 235 | * 236 | * Handles the item transitions, appending the correct class onto each 237 | * element. Classes follow an "item-n" conventin, where n is the number of 238 | * the item in the list. See CSS, and add more in the CSS if you need. 239 | * 240 | * @param {HTMLElement} menuItem The menu item in question 241 | * @param {Number} num The number to append to the class name 242 | */ 243 | 244 | Menu.prototype._itemTransitionHandler = function( menuItem, num ) { 245 | menuItem.classList.add("item-"+num); 246 | }; 247 | 248 | /** 249 | * Menu `_initTouchEffect` 250 | * 251 | * Initialises and gets the touch effect ready for action. The touch effect 252 | * is a material design style that simulates some kind of pressure when a 253 | * user touches a link, and creates a rippling type effect spanning from the 254 | * touch point go outward. 255 | */ 256 | 257 | Menu.prototype._initTouchEffect = function() { 258 | var num = this.menuItemLinks.length; 259 | for ( var i = 0; i < num; i++ ) { 260 | var menuItemLink = this.menuItemLinks[i]; 261 | this._touchEffectHandler( menuItemLink ); 262 | } 263 | }; 264 | 265 | /** 266 | * Menu `_touchEffectHandler` 267 | * 268 | * Handler for the touch effect for each particular item in the menu. Does a 269 | * lot of math calculations to position the actual origin of the animation, 270 | * animating it outwards. 271 | * 272 | * @param {HTMLElement} menuItemLink The menu item link in question 273 | */ 274 | 275 | Menu.prototype._touchEffectHandler = function( menuItemLink ) { 276 | var elWidth = menuItemLink.offsetWidth, 277 | elHeight = menuItemLink.offsetHeight, 278 | touchEffectSize = Math.max(elWidth, elHeight) * 2; 279 | 280 | var touchEffectElement = document.createElement("span"); 281 | touchEffectElement.className = "mm-menu__link--touch-effect"; 282 | touchEffectElement.style.width = touchEffectSize+"px"; 283 | touchEffectElement.style.height = touchEffectSize+"px"; 284 | menuItemLink.insertBefore( touchEffectElement, menuItemLink.firstChild ); 285 | 286 | menuItemLink.addEventListener( "click", function(e) { 287 | var relX = getPosition(e).x - getOffsetRect(this).x, 288 | relY = getPosition(e).y - getOffsetRect(this).y; 289 | 290 | touchEffectElement.style.top = relY+"px"; 291 | touchEffectElement.style.left = relX+"px"; 292 | touchEffectElement.style.marginTop = -(touchEffectSize/2)+"px"; 293 | touchEffectElement.style.marginLeft = -(touchEffectSize/2)+"px"; 294 | touchEffectElement.classList.add("animating"); 295 | }); 296 | 297 | 298 | touchEffectElement.addEventListener( transitionEvent, function() { 299 | this.classList.remove("animating"); 300 | }); 301 | }; 302 | 303 | /** 304 | * 305 | */ 306 | 307 | Menu.prototype._initMaskEvents = function() { 308 | var scope = this; 309 | this.mask.addEventListener( "click", function(e) { 310 | e.preventDefault(); 311 | (scope.menuPosition == "on") ? scope._toggleMenuOff() : false; 312 | }); 313 | }; 314 | 315 | /** 316 | * Add to global namespace. 317 | */ 318 | 319 | window.Menu = Menu; 320 | 321 | })( window ); -------------------------------------------------------------------------------- /js/external/fusionAd.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | var fusoionad_script = document.createElement('script'); 3 | fusoionad_script.type = 'text/javascript'; 4 | fusoionad_script.async = true; 5 | fusoionad_script.id = "_fusionads_js"; 6 | fusoionad_script.src = '//cdn.fusionads.net/fusion.js?zoneid=1332&serve=C6SDP2Y&placement=callmenickcom'; 7 | document.body.appendChild(fusoionad_script); 8 | })(); -------------------------------------------------------------------------------- /js/external/githubIcons.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | var gitFork = document.createElement("iframe"); 3 | gitFork.setAttribute( "src", "http://ghbtns.com/github-btn.html?user=callmenick&repo=Material-Menu&type=fork&count=true" ); 4 | gitFork.setAttribute( "allowtransparency", "true" ); 5 | gitFork.setAttribute( "frameborder", "0" ); 6 | gitFork.setAttribute( "scrolling", "0" ); 7 | gitFork.style.width = "95px"; 8 | gitFork.style.height = "20px"; 9 | document.getElementById("github-icons").appendChild(gitFork); 10 | 11 | var gitWatch = document.createElement("iframe"); 12 | gitWatch.setAttribute( "src", "http://ghbtns.com/github-btn.html?user=callmenick&repo=Material-Menu&type=watch&count=true" ); 13 | gitWatch.setAttribute( "allowtransparency", "true" ); 14 | gitWatch.setAttribute( "frameborder", "0" ); 15 | gitWatch.setAttribute( "scrolling", "0" ); 16 | gitWatch.style.width = "110px"; 17 | gitWatch.style.height = "20px"; 18 | document.getElementById("github-icons").appendChild(gitWatch); 19 | })(); -------------------------------------------------------------------------------- /js/production/materialMenu.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Material Menu 3 | * 4 | * The functionality for an off canvas menu, inspired by Google's material 5 | * design. 6 | * 7 | * Licensed under the MIT license. 8 | * http://www.opensource.org/licenses/mit-license.php 9 | * 10 | * Copyright 2014, Call Me Nick 11 | * http://callmenick.com 12 | */ 13 | 14 | (function( window ) { 15 | 16 | "use strict"; 17 | 18 | ////////////////////////////////////////////////////////////////////////////// 19 | ////////////////////////////////////////////////////////////////////////////// 20 | // 21 | // T R A N S I T I O N E N D E V E N T S 22 | // http://davidwalsh.name/css-animation-callback 23 | // 24 | ////////////////////////////////////////////////////////////////////////////// 25 | ////////////////////////////////////////////////////////////////////////////// 26 | 27 | function whichTransitionEvent(){ 28 | var t, 29 | el = document.createElement("fakeelement"); 30 | 31 | var transitions = { 32 | "transition" : "transitionend", 33 | "OTransition" : "oTransitionEnd", 34 | "MozTransition" : "transitionend", 35 | "WebkitTransition": "webkitTransitionEnd" 36 | } 37 | 38 | for (t in transitions){ 39 | if (el.style[t] !== undefined){ 40 | return transitions[t]; 41 | } 42 | } 43 | } 44 | var transitionEvent = whichTransitionEvent(); 45 | 46 | ////////////////////////////////////////////////////////////////////////////// 47 | ////////////////////////////////////////////////////////////////////////////// 48 | // 49 | // H E L P E R F U N C T I O N S 50 | // 51 | ////////////////////////////////////////////////////////////////////////////// 52 | ////////////////////////////////////////////////////////////////////////////// 53 | 54 | /** 55 | * Helper function `getPosition` 56 | * 57 | * Get's the position based on event/element. 58 | */ 59 | 60 | function getPosition(e) { 61 | var posx = 0; 62 | var posy = 0; 63 | if (!e) var e = window.event; 64 | if (e.pageX || e.pageY) { 65 | posx = e.pageX; 66 | posy = e.pageY; 67 | } 68 | else if (e.clientX || e.clientY) { 69 | posx = e.clientX + document.body.scrollLeft 70 | + document.documentElement.scrollLeft; 71 | posy = e.clientY + document.body.scrollTop 72 | + document.documentElement.scrollTop; 73 | } 74 | return { 75 | x: posx, 76 | y: posy 77 | } 78 | } 79 | 80 | /** 81 | * Helper function `getOffsetRect` 82 | * 83 | * Get's the position based on event/element. 84 | */ 85 | 86 | function getOffsetRect(elem) { 87 | var box = elem.getBoundingClientRect() 88 | 89 | var body = document.body; 90 | var docElem = document.documentElement; 91 | 92 | var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop; 93 | var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft; 94 | 95 | var clientTop = docElem.clientTop || body.clientTop || 0; 96 | var clientLeft = docElem.clientLeft || body.clientLeft || 0; 97 | 98 | var top = box.top + scrollTop - clientTop; 99 | var left = box.left + scrollLeft - clientLeft; 100 | 101 | return { 102 | x: Math.round(left), 103 | y: Math.round(top) 104 | } 105 | } 106 | 107 | ////////////////////////////////////////////////////////////////////////////// 108 | ////////////////////////////////////////////////////////////////////////////// 109 | // 110 | // M E N U C O M P O N E N T 111 | // 112 | ////////////////////////////////////////////////////////////////////////////// 113 | ////////////////////////////////////////////////////////////////////////////// 114 | 115 | /** 116 | * Menu 117 | * 118 | * Constructor function. Cache some vars and get ready for takeoff and menu 119 | * magic. 120 | */ 121 | 122 | function Menu() { 123 | this.body = document.body; 124 | this.wrapper = document.querySelector("#wrapper"); 125 | this.toggle = document.querySelector("#mm-menu-toggle"); 126 | this.menu = document.querySelector("#mm-menu"); 127 | this.menuItems = this.menu.querySelectorAll("li"); 128 | this.menuItemLinks = this.menu.querySelectorAll("a"); 129 | this.menuPosition = "off"; 130 | this.mask = document.createElement("div"); 131 | this.mask.className = "mm-menu-mask"; 132 | document.body.appendChild(this.mask); 133 | this._init(); 134 | } 135 | 136 | /** 137 | * Menu `_init` 138 | * 139 | * Initialise some stuff for the menu, like transition/animation delays and 140 | * all that funky jazz. Then get ready for events. 141 | */ 142 | 143 | Menu.prototype._init = function() { 144 | this._initToggleEvents(); 145 | this._initItemTransitions(); 146 | this._initTouchEffect(); 147 | this._initMaskEvents(); 148 | }; 149 | 150 | /** 151 | * Menu `_initEvents` 152 | * 153 | * Get ready for the events taking place. Mainly just the pressing of the 154 | * toggle button. 155 | */ 156 | 157 | Menu.prototype._initToggleEvents = function() { 158 | var scope = this; 159 | this.toggle.addEventListener( "click", function() { 160 | (scope.menuPosition == "off") ? scope._toggleMenuOn() : scope._toggleMenuOff(); 161 | }); 162 | }; 163 | 164 | /** 165 | * Menu `_toggleMenuOn` 166 | * 167 | * Toggles the menu into "on" position. 168 | */ 169 | 170 | Menu.prototype._toggleMenuOn = function() { 171 | var scope = this; 172 | 173 | this.body.classList.add("mm-menu-open"); 174 | this.wrapper.classList.add("mm-menu-open"); 175 | this.toggle.classList.add("active"); 176 | this.menu.classList.add("active"); 177 | 178 | for ( var i = 0; i < scope.menuItems.length; i++ ) { 179 | var item = scope.menuItems[i]; 180 | (function( item ) { 181 | item.classList.add("in-view"); 182 | })( item ); 183 | } 184 | 185 | this.mask.classList.add("active"); 186 | this.menuPosition = "on"; 187 | }; 188 | 189 | /** 190 | * Menu `_toggleMenuOff` 191 | * 192 | * Toggles the menu into "off" position. 193 | */ 194 | 195 | Menu.prototype._toggleMenuOff = function() { 196 | var scope = this; 197 | 198 | this.body.classList.remove("mm-menu-open"); 199 | this.wrapper.classList.remove("mm-menu-open"); 200 | this.toggle.classList.remove("active"); 201 | this.menu.classList.remove("active"); 202 | 203 | for ( var i = 0; i < scope.menuItems.length; i++ ) { 204 | var item = scope.menuItems[i]; 205 | (function( item ) { 206 | item.classList.remove("in-view"); 207 | })( item ); 208 | } 209 | 210 | this.mask.classList.remove("active"); 211 | this.menuPosition = "off"; 212 | }; 213 | 214 | /** 215 | * Menu `_initItemTransitions` 216 | * 217 | * Initialise the item transistions. Items transition into view as if they 218 | * are being pulled one by one, giving a neat effect. For this to take place, 219 | * we need to add a necessary class to each item menu. The classes are 220 | * named sequentially, and more can be added in the CSS. 221 | */ 222 | 223 | Menu.prototype._initItemTransitions = function() { 224 | var scope = this; 225 | var len = this.menuItems.length; 226 | for ( var i = 0; i < len; i++ ) { 227 | var num = i+1; 228 | var menuItem = this.menuItems[i]; 229 | this._itemTransitionHandler( menuItem, num ); 230 | } 231 | }; 232 | 233 | /** 234 | * Menu `_itemTransitionHandler` 235 | * 236 | * Handles the item transitions, appending the correct class onto each 237 | * element. Classes follow an "item-n" conventin, where n is the number of 238 | * the item in the list. See CSS, and add more in the CSS if you need. 239 | * 240 | * @param {HTMLElement} menuItem The menu item in question 241 | * @param {Number} num The number to append to the class name 242 | */ 243 | 244 | Menu.prototype._itemTransitionHandler = function( menuItem, num ) { 245 | menuItem.classList.add("item-"+num); 246 | }; 247 | 248 | /** 249 | * Menu `_initTouchEffect` 250 | * 251 | * Initialises and gets the touch effect ready for action. The touch effect 252 | * is a material design style that simulates some kind of pressure when a 253 | * user touches a link, and creates a rippling type effect spanning from the 254 | * touch point go outward. 255 | */ 256 | 257 | Menu.prototype._initTouchEffect = function() { 258 | var num = this.menuItemLinks.length; 259 | for ( var i = 0; i < num; i++ ) { 260 | var menuItemLink = this.menuItemLinks[i]; 261 | this._touchEffectHandler( menuItemLink ); 262 | } 263 | }; 264 | 265 | /** 266 | * Menu `_touchEffectHandler` 267 | * 268 | * Handler for the touch effect for each particular item in the menu. Does a 269 | * lot of math calculations to position the actual origin of the animation, 270 | * animating it outwards. 271 | * 272 | * @param {HTMLElement} menuItemLink The menu item link in question 273 | */ 274 | 275 | Menu.prototype._touchEffectHandler = function( menuItemLink ) { 276 | var elWidth = menuItemLink.offsetWidth, 277 | elHeight = menuItemLink.offsetHeight, 278 | touchEffectSize = Math.max(elWidth, elHeight) * 2; 279 | 280 | var touchEffectElement = document.createElement("span"); 281 | touchEffectElement.className = "mm-menu__link--touch-effect"; 282 | touchEffectElement.style.width = touchEffectSize+"px"; 283 | touchEffectElement.style.height = touchEffectSize+"px"; 284 | menuItemLink.insertBefore( touchEffectElement, menuItemLink.firstChild ); 285 | 286 | menuItemLink.addEventListener( "click", function(e) { 287 | var relX = getPosition(e).x - getOffsetRect(this).x, 288 | relY = getPosition(e).y - getOffsetRect(this).y; 289 | 290 | touchEffectElement.style.top = relY+"px"; 291 | touchEffectElement.style.left = relX+"px"; 292 | touchEffectElement.style.marginTop = -(touchEffectSize/2)+"px"; 293 | touchEffectElement.style.marginLeft = -(touchEffectSize/2)+"px"; 294 | touchEffectElement.classList.add("animating"); 295 | }); 296 | 297 | 298 | touchEffectElement.addEventListener( transitionEvent, function() { 299 | this.classList.remove("animating"); 300 | }); 301 | }; 302 | 303 | /** 304 | * 305 | */ 306 | 307 | Menu.prototype._initMaskEvents = function() { 308 | var scope = this; 309 | this.mask.addEventListener( "click", function(e) { 310 | e.preventDefault(); 311 | (scope.menuPosition == "on") ? scope._toggleMenuOff() : false; 312 | }); 313 | }; 314 | 315 | /** 316 | * Add to global namespace. 317 | */ 318 | 319 | window.Menu = Menu; 320 | 321 | })( window ); -------------------------------------------------------------------------------- /js/production/materialMenu.min.js: -------------------------------------------------------------------------------- 1 | !function(a){"use strict";function b(){var a,b=document.createElement("fakeelement"),c={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(a in c)if(void 0!==b.style[a])return c[a]}function c(b){var c=0,d=0;if(!b)var b=a.event;return b.pageX||b.pageY?(c=b.pageX,d=b.pageY):(b.clientX||b.clientY)&&(c=b.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,d=b.clientY+document.body.scrollTop+document.documentElement.scrollTop),{x:c,y:d}}function d(b){var c=b.getBoundingClientRect(),d=document.body,e=document.documentElement,f=a.pageYOffset||e.scrollTop||d.scrollTop,g=a.pageXOffset||e.scrollLeft||d.scrollLeft,h=e.clientTop||d.clientTop||0,i=e.clientLeft||d.clientLeft||0,j=c.top+f-h,k=c.left+g-i;return{x:Math.round(k),y:Math.round(j)}}function e(){this.body=document.body,this.wrapper=document.querySelector("#wrapper"),this.toggle=document.querySelector("#mm-menu-toggle"),this.menu=document.querySelector("#mm-menu"),this.menuItems=this.menu.querySelectorAll("li"),this.menuItemLinks=this.menu.querySelectorAll("a"),this.menuPosition="off",this.mask=document.createElement("div"),this.mask.className="mm-menu-mask",document.body.appendChild(this.mask),this._init()}var f=b();e.prototype._init=function(){this._initToggleEvents(),this._initItemTransitions(),this._initTouchEffect(),this._initMaskEvents()},e.prototype._initToggleEvents=function(){var a=this;this.toggle.addEventListener("click",function(){"off"==a.menuPosition?a._toggleMenuOn():a._toggleMenuOff()})},e.prototype._toggleMenuOn=function(){var a=this;this.body.classList.add("mm-menu-open"),this.wrapper.classList.add("mm-menu-open"),this.toggle.classList.add("active"),this.menu.classList.add("active");for(var b=0;bb;b++){var c=b+1,d=this.menuItems[b];this._itemTransitionHandler(d,c)}},e.prototype._itemTransitionHandler=function(a,b){a.classList.add("item-"+b)},e.prototype._initTouchEffect=function(){for(var a=this.menuItemLinks.length,b=0;a>b;b++){var c=this.menuItemLinks[b];this._touchEffectHandler(c)}},e.prototype._touchEffectHandler=function(a){var b=a.offsetWidth,e=a.offsetHeight,g=2*Math.max(b,e),h=document.createElement("span");h.className="mm-menu__link--touch-effect",h.style.width=g+"px",h.style.height=g+"px",a.insertBefore(h,a.firstChild),a.addEventListener("click",function(a){var b=c(a).x-d(this).x,e=c(a).y-d(this).y;h.style.top=e+"px",h.style.left=b+"px",h.style.marginTop=-(g/2)+"px",h.style.marginLeft=-(g/2)+"px",h.classList.add("animating")}),h.addEventListener(f,function(){this.classList.remove("animating")})},e.prototype._initMaskEvents=function(){var a=this;this.mask.addEventListener("click",function(b){b.preventDefault(),"on"==a.menuPosition?a._toggleMenuOff():!1})},a.Menu=e}(window); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "material-off-canvas-menu", 3 | "version": "0.1.0", 4 | "devDependencies": { 5 | "grunt": "^0.4.5", 6 | "grunt-contrib-concat": "^0.5.0", 7 | "grunt-contrib-cssmin": "^0.11.0", 8 | "grunt-contrib-uglify": "^0.7.0", 9 | "grunt-contrib-watch": "^0.6.1" 10 | } 11 | } 12 | --------------------------------------------------------------------------------