[
  {
    "path": ".editorconfig",
    "content": "# top-most EditorConfig file\nroot = true\n\n[*]\nindent_style = space\nend_of_line = lf\ntrim_trailing_whitespace = true\n\n[*.js]\nindent_style = space\nindent_size = 2\n\n[package.json]\nindent_style = space\nindent_size = 2\n\n[*.md]\ntrim_trailing_whitespace = false\n"
  },
  {
    "path": ".eslintrc",
    "content": "{\n  \"ecmaFeatures\": {\n    \"jsx\": true\n  },\n  \"rules\": {\n    \"semi\": [2, \"always\"],\n    \"quotes\": [2, \"single\"],\n    \"strict\": [2, \"global\"],\n    \"no-underscore-dangle\": 0\n  },\n  \"env\": {\n    \"es6\": true,\n    \"browser\": true,\n    \"node\": true\n  }\n}\n"
  },
  {
    "path": ".gitignore",
    "content": ".DS_Store\nnode_modules\nbower_components\n.sass-cache/\n.grunt\ndist\nnpm-debug.log\nbuild/\ngh-pages_temp/\ndemo/bundle.js\nmfb.css*\nmfb.scss\n"
  },
  {
    "path": ".jshintrc",
    "content": "{\n    \"curly\": true,\n    \"eqeqeq\": true,\n    \"eqnull\": true,\n    \"expr\": true,\n    \"latedef\": true,\n    \"onevar\": true,\n    \"noarg\": true,\n    \"node\": true,\n    \"trailing\": true,\n    \"undef\": true,\n    \"unused\": true,\n    \"jasmine\" : true,\n    \"indent\": 2 ,\n    \"globals\": {\n      \"define\" : true\n    }\n}\n"
  },
  {
    "path": ".npmignore",
    "content": "index.css\nindex.html\nshowcase.html\n.sass-cache/\n.jshintrc\n.gitignore\n.grunt\n\ntest/\nmfb/test/\ndemo/\nbuild/\nbower_components\n.sass-cache/\n.grunt\ndist\nnpm-debug.log\nbuild/\ngh-pages_temp/\n"
  },
  {
    "path": ".travis.yml",
    "content": "sudo: false\nlanguage: node_js\nnode_js:\n  - 'iojs'\n  - '0.12'\n  - '0.10'\n"
  },
  {
    "path": "Gruntfile.js",
    "content": "module.exports = function(grunt) {\n\n  // Project configuration.\n  grunt.initConfig({\n    pkg: grunt.file.readJSON('package.json'),\n    watch: {\n      css: {\n        files: '**/*.scss',\n        tasks: ['sass:base']\n      },\n      js: {\n        files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],\n        tasks: ['jshint:all']\n      }\n    },\n    sass: {\n      base: {\n        files: {\n          'src/styles/style.css': 'src/styles/style.scss'\n        }\n      }\n    },\n\n    clean: {\n      check: ['.grunt/grunt-gh-pages/gh-pages/check'],\n      live: 'gh-pages_temp'\n    },\n\n    jshint: {\n      options: {\n        jshintrc : true\n      },\n      all: ['Gruntfile.js', 'build/mfb-menu.js']\n    },\n\n    useminPrepare: {\n      html: 'gh-pages_tem/index.html',\n      options: {\n        //dest: 'gh-pages_tem/index.html'\n      }\n    },\n\n    usemin: {\n      html: ['gh-pages_temp/index.html']\n    },\n\n    copy: {\n      live: {\n        files: [{\n          src: ['demo/index.html', 'demo/index.css', 'demo/bundle.js'],\n          dest: 'gh-pages_temp',\n          expand: true, flatten: true\n        },{\n          src: ['mfb/src/*.css', 'mfb/src/*.css.map', 'mfb/src/lib/**/*.js'],\n          dest: 'gh-pages_temp',\n          expand: true, flatten: true\n        }]\n      }\n    },\n\n    'gh-pages': {\n      options: {\n        base: 'gh-pages_temp/',\n      },\n      'live': {\n        src: ['*']\n      },\n      'check': {\n        options: {\n          push: false\n        },\n        src: ['*']\n      }\n    }\n  });\n\n  grunt.loadNpmTasks('grunt-gh-pages');\n  grunt.loadNpmTasks('grunt-contrib-watch');\n  grunt.loadNpmTasks('grunt-contrib-sass');\n  grunt.loadNpmTasks('grunt-contrib-clean');\n  grunt.loadNpmTasks('grunt-contrib-jshint');\n  grunt.loadNpmTasks('grunt-contrib-copy');\n  grunt.loadNpmTasks('grunt-usemin');\n\n  // Publish this to live site\n  grunt.registerTask('live', [\n      'clean:live',\n      'useminPrepare',\n      'copy:live',\n      'usemin',\n      'gh-pages:live'\n    ]);\n  // Live site dry run\n  grunt.registerTask('livecheck', [\n      'clean:check',\n      'useminPrepare',\n      'copy:live',\n      'usemin',\n      'clean:check','gh-pages:check'\n    ]);\n\n  grunt.registerTask('watch-css', ['watch:css']);\n  grunt.registerTask('watch-js', ['watch:js']);\n  grunt.registerTask('default', []);\n};\n"
  },
  {
    "path": "LICENSE",
    "content": "The MIT License (MIT)\n\nCopyright (c) 2014\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\n"
  },
  {
    "path": "README.md",
    "content": "# React Material Floating Button\n\n\nMaterial design floating action button implemented as a React component.\n\nMade to be fast and easy to customize.\n~~Shamelessly~~ inspired by action buttons from Google Inbox, Evernote and Path.\n\nClone/download the repo from Github or just use npm:\n```\nnpm install react-mfb --save\n```\n\nDocs are still to come (but hopefully will be there soon).\nIn the meantime if you want to play with it check the project homepage source code for hints on how to use the component.\n\n## Demo\nSee the [project page](http://nobitagit.github.io/react-material-floating-button/) or just look at this awesome gif:\n\n<img src=\"http://zippy.gfycat.com/LimitedTatteredFieldmouse.gif\">\n\n**Other versions**\n- [Vanilla html](https://github.com/nobitagit/material-floating-button) (original, upstream version of the component)\n- [Angular directive](https://github.com/nobitagit/ng-material-floating-button)\n\nDemo icons courtesy of [Ionicons](http://ionicons.com)\n"
  },
  {
    "path": "demo/index.css",
    "content": "html, body{\n  height: 100%;\n  min-height: 100%;\n}\nhtml{\n  background: #E9EBEC;\n  font-family: 'Raleway', sans-serif;\n  font-weight: 200;\n}\nbody{\n  display: -webkit-flex;\n  -webkit-align-items: center;\n  -webkit-justify-content: center;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\nh1{\n  margin: 0.2em 0;\n  color: rgba(40, 33, 33, .7);\n  color: rgba(124, 98, 152, 1);\n  font-weight: 400;\n}\nheader{\n  background: #00C8BE;\n  padding: 0.3em 1em;\n  position: relative;\n  z-index: 20;\n}\n.viewCode header{\n  box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);\n}\n.showcode{\n  background: rgb(232, 216, 49);\n  color: rgba(124, 98, 152, 1);\n  width: 40px;\n  height: 40px;\n  text-align: center;\n  position: absolute;\n  right: 1em;\n  bottom: 0;\n  margin-bottom: -15px;\n  border-radius: 100%;\n  font-size: 16px;\n  cursor: pointer;\n  box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);\n  transition: all .3s;\n}\n.viewCode .showcode{\n  -webkit-transform: rotateX(-180deg);\n  transform: rotateX(-180deg);\n  box-shadow: 0px -2px 5px 0 rgba(0, 0, 0, 0.26);\n}\n.icon-nocode, .icon-yepcode{\n  transition: opacity .3s;\n  position: absolute;\n  left: 0;\n  display: block;\n  width: 100%;\n  line-height: 40px;\n}\n.icon-nocode{\n  opacity: 0;\n}\n.viewCode .icon-nocode{\n  opacity: 1;\n}\n.viewCode .icon-yepcode{\n  opacity: 0;\n}\n.panel{\n  width: 90%;\n  position: relative;\n  max-width: 650px;\n  box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);\n  background: #F5F5F5;\n  border-radius: 3px;\n  overflow: hidden;\n}\narticle{\n  min-height: 180px;\n  padding: 1em;\n  font-weight: 200;\n  line-height: 1.5em;\n  position: relative;\n}\nfooter{\n  padding: 0.3em 1em 1em;\n}\nfooter a, footer a:active, footer a:visited{\n  color: inherit;\n}\n.code{\n  position: absolute;\n  top: 0;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  overflow: scroll;\n  background: rgba(124, 98, 152, 0.94);\n  color: rgba(245, 247, 247, 0.92);\n  padding: 0em 1em;\n  transition: all .4s;\n  -webkit-transform: translateY(-100%);\n  transform: translateY(-100%);\n}\n.code p:first-child{\n  margin-top: 2em;\n}\n.code a{\n  color: rgba(232, 216, 49, 0.9);\n}\n.viewCode .code{\n  -webkit-transform: translateY(0);\n  transform: translateY(0);\n  box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.36);\n}\n.actions{\n  font-weight: 300;\n  text-transform: uppercase;\n  font-size: 0.8em;\n  padding: 1em;\n  border: none;\n  background: none;\n  transition: color .2s;\n  cursor: pointer;\n}\n.actions:hover{\n  color: rgb(30, 30, 171);\n  background: #F5F5F5;\n  box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);\n}\n\ncode, pre {\n  background: rgba(255,255,255,0.1);\n  color:  rgba(232, 216, 49, 0.9);\n  font-family: \"Source Code Pro\", Monaco, Menlo, Consolas, \"Courier New\",monospace;\n  padding: 0.5em;\n  border-radius: 3px;\n  margin: 1em 0;\n}\ncode{\n  display: inline;\n  vertical-align: middle;\n  margin: 0;\n}\npre{\n  display: block;\n}\n.striked{\n text-decoration: line-through;\n}\n.mfb-component--tl{\n  animation: fromTop 1s 1;\n  -webkit-animation: fromTop 1s 1;\n}\n.mfb-component--tr{\n  animation: fromTop 1.3s 1;\n  -webkit-animation: fromTop 1.3s 1;\n}\n.mfb-component--br{\n  animation: fromBottom 1.6s 1;\n  -webkit-animation: fromBottom 1.6s 1;\n}\n.mfb-component--bl{\n  animation: fromBottom 1.9s 1;\n  -webkit-animation: fromBottom 1.9s 1;\n}\n@keyframes fromBottom {\n  0% {\n    transform: translateY(250px);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n@keyframes fromTop {\n  0% {\n    transform: translateY(-250px);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n@-webkit-keyframes fromBottom {\n  0% {\n    transform: translateY(250px);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n@-webkit-keyframes fromTop {\n  0% {\n    transform: translateY(-250px);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}   \n"
  },
  {
    "path": "demo/index.html",
    "content": "<!DOCTYPE HTML>\n<html>\n  <head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n    <!-- build:css mfb.css -->\n    <link href=\"../mfb.css\" rel=\"stylesheet\"/>\n    <!-- endbuild -->\n\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css\">\n    <link rel=\"stylesheet\" href=\"http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css\">\n    <link href='http://fonts.googleapis.com/css?family=Raleway:100,200,300,400' rel='stylesheet' type='text/css'>\n\n    <!-- build:js modernizr.touch.js -->\n    <script type=\"text/javascript\" src=\"../mfb/src/lib/modernizr.touch.js\"></script>\n    <!-- endbuild -->\n\n    <link href=\"index.css\" rel=\"stylesheet\">\n    <title>React Material Floating Button - by Nobita</title>\n  </head>\n  <body>\n\n    <div id=\"menu\"></div>\n\n    <section id=\"panel\" class=\"panel\">\n      <header>\n        <h1>\n          React Material Floating Button\n        </h1>\n        <span id=\"showcode\" class=\"showcode\">\n          <i class=\"ion-eye icon-yepcode\"></i>\n          <i class=\"ion-eye-disabled icon-nocode\"></i>\n        </span>\n      </header>\n      <article>\n        <p>\n          Material floating action button implemented as a React component. Also available in vanilla html and Angularjs directive. <br>\n          <span class=\"striked\">Shamelessly</span> Openly inspired by Google Inbox, Evernote and Path.\n        </p>\n        <p>\n          To add Material Floating Buttons to any project just download or clone the repo from Github. Click on the <strong>yellow button</strong> here above for a code preview or choose an effect from the <strong>dropdown</strong> below and interact with any button on the corners of the screen.\n        </p>\n        <p>\n          <select id=\"selections-fx\">\n            <option disabled>Effect</option>\n            <option value=\"zoomin\" selected>Zoom in</option>\n            <option value=\"slidein\">Slidein</option>\n            <option value=\"slidein-spring\">Slidein (spring)</option>\n            <option value=\"fountain\">Fountain</option>\n          </select>\n\n          <select id=\"selections-pos\">\n            <option disabled>Position</option>\n            <option value=\"tl\">top left</option>\n            <option value=\"tr\">top right</option>\n            <option value=\"bl\">bottom left</option>\n            <option value=\"br\" selected>bottom right</option>\n          </select>\n\n          <select id=\"selections-method\">\n            <option disabled>Toggling method</option>\n            <option value=\"click\">click</option>\n            <option value=\"hover\" selected>hover</option>\n          </select>\n        </p>\n\n        <div class=\"code\">\n          <p>\n            To add Material Floating Buttons to any project just download the files from here below or clone the repo from Github. <br>\n          </p>\n          <pre>git clone https://github.com/nobitagit/react-material-floating-button.git</pre>\n          <p>\n            Run <code>npm install</code> and after referencing the styles in your header drop the MFB markup in your HTML like so:\n          </p>\n<pre>\nvar component = React.createElement(MfbMenu, yourOpts);\nReact.render( component, document.getElementById('someId') );</pre>\n          <p>\n            The <code>yourOpts</code> object passed as a second param to the <code>createElement</code> function provide the configuration for the component such as position, labels, icons, links and callbacks. All the other styles and configurations are just css.\n          </p>\n          <p>\n            The best way to customise the styles is to build them directly from the source as the scss file is filled with customizable variables. From there choose your favorite colors and sizes and then compile the css.\n          </p>\n        </div>\n\n      </article>\n      <footer>\n        <a href=\"https://github.com/nobitagit/react-material-floating-button\">\n          <button class=\"actions\">\n            <i class=\"ion-social-github\"></i> View on Github\n          </button>\n        </a>\n        <a href=\"http://twitter.com/share?text=Amazing Google Inbox style material floating menu as a React component!&url=http://nobitagit.github.io/react-material-floating-button/&hashtags=material,menu,reactjs,react,component\">\n          <button class=\"actions\">\n            <i class=\"ion-social-twitter\"></i> Share on Twitter\n          </button>\n        </a>\n      </footer>\n    </section>\n\n    <script src=\"bundle.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "demo/index.js",
    "content": "'use strict';\n\nvar React = require('react');\nvar ReactDOM = require('react-dom');\nvar Menu = require('../').Menu;\nvar MainButton = require('../').MainButton;\nvar ChildButton = require('../').ChildButton;\n\nvar panel = document.getElementById('panel'),\n    showcode = document.getElementById('showcode'),\n    selectFx = document.getElementById('selections-fx'),\n    selectPos = document.getElementById('selections-pos'),\n    selectMethod = document.getElementById('selections-method');\n\n// demo defaults\nvar effect = 'zoomin',\n    pos = 'br',\n    method = 'hover';\n\nfunction renderMenu(){\n  var component = (\n    <Menu effect={effect} method={method} position={pos}>\n      <MainButton iconResting=\"ion-plus-round\" iconActive=\"ion-close-round\" />\n      <ChildButton\n        //onClick={function(e){ console.log(e); e.preventDefault(); }}\n        icon=\"ion-social-github\"\n        label=\"View on Github\"\n        href=\"https://github.com/nobitagit/react-material-floating-button/\" />\n      <ChildButton\n        icon=\"ion-social-octocat\"\n        label=\"Follow me on Github\"\n        href=\"https://github.com/nobitagit\" />\n      <ChildButton\n        icon=\"ion-social-twitter\"\n        label=\"Share on Twitter\"\n        href=\"http://twitter.com/share?text=Amazing Google Inbox style material floating menu as a React component!&url=http://nobitagit.github.io/react-material-floating-button/&hashtags=material,menu,reactjs,react,component\" />\n    </Menu>\n  );\n\n  ReactDOM.render(component, document.getElementById('menu'));\n}\n\nrenderMenu();\n\nfunction switchEffect(){\n  effect = this.options[this.selectedIndex].value;\n  renderMenu();\n}\n\nfunction switchPosition(){\n  pos = this.options[this.selectedIndex].value;\n  renderMenu();\n}\n\nfunction switchMethod(){\n  method = this.options[this.selectedIndex].value;\n  renderMenu();\n}\n\nfunction toggleCode() {\n  panel.classList.toggle('viewCode');\n}\n\nshowcode.addEventListener('click', toggleCode);\nselectFx.addEventListener('change', switchEffect);\nselectPos.addEventListener('change', switchPosition);\nselectMethod.addEventListener('change', switchMethod);\n"
  },
  {
    "path": "gulpfile.js",
    "content": "'use strict';\n\nvar gulp = require('gulp');\nvar babel = require('gulp-babel');\n\ngulp.task('js', function(){\n  return gulp.src('./src/**/*.js')\n    .pipe(babel())\n    .pipe(gulp.dest('build'));\n});\n\ngulp.task('css', function(){\n  return gulp.src(['./mfb/src/mfb.css', './mfb/src/mfb.css.map', './mfb/src/mfb.scss'])\n    .pipe(gulp.dest('./'));\n});\n\ngulp.task('default', ['js', 'css']);\n"
  },
  {
    "path": "index.js",
    "content": "'use strict';\n\nmodule.exports = {\n  Menu: require('./build/menu'),\n  MainButton: require('./build/main-button'),\n  ChildButton: require('./build/child-button')\n};\n"
  },
  {
    "path": "mfb/.gitignore",
    "content": ".DS_Store\nnode_modules\n.sass-cache/\n.grunt"
  },
  {
    "path": "mfb/.npmignore",
    "content": "test/\nindex.css\nindex.html\nshowcase.html\n.sass-cache/\n.jshintrc\n.gitignore\n.grunt\n"
  },
  {
    "path": "mfb/Gruntfile.js",
    "content": "module.exports = function(grunt) {\n\n  // Project configuration.\n  grunt.initConfig({\n    pkg: grunt.file.readJSON('package.json'),\n    watch: {\n      css: {\n        files: '**/*.scss',\n        tasks: ['sass:base', 'cssmin']\n      }\n    },\n    sass: {\n      base: {\n        files: {\n          'src/mfb.css': 'src/mfb.scss'\n        }\n      }\n    },\n\n    clean: {\n      check: ['.grunt/grunt-gh-pages/gh-pages/check'],\n      live:  ['.grunt/grunt-gh-pages/gh-pages/live']\n    },\n\n    cssmin: {\n      main: {\n        files: [{\n          expand: true,\n          cwd: 'src',\n          src: ['mfb.css', '!*.min.css'],\n          dest: 'src',\n          ext: '.min.css'\n        }]\n      }\n    },\n\n    uglify: {\n      main: {\n        files: {\n          'src/mfb.min.js': ['src/mfb.js']\n        }\n      }\n    },\n\n    livePages: [\n            'index.html',\n            'index.css',\n            '*.css',\n            '**/*.map',\n            'mfb.js',\n            'lib/modernizr.touch.js'],\n    'gh-pages': {\n      options: {\n        base: 'src',\n      },\n      'live': {\n        src: ['<%= livePages %>']\n      },\n      'check': {\n        options: {\n          push: false\n        },\n        src: ['<%= livePages %>']\n      }\n    }\n  });\n\n  grunt.loadNpmTasks('grunt-gh-pages');\n  grunt.loadNpmTasks('grunt-contrib-watch');\n  grunt.loadNpmTasks('grunt-contrib-sass');\n  grunt.loadNpmTasks('grunt-contrib-clean');\n  grunt.loadNpmTasks('grunt-contrib-cssmin');\n  grunt.loadNpmTasks('grunt-contrib-uglify');\n\n  // Publish this to live site\n  grunt.registerTask('live', ['clean:live','gh-pages:live']);\n  // Live site dry run: test locally before pushing.\n  // In .grunt look for the folder 'check'\n  grunt.registerTask('livecheck', ['clean:check','gh-pages:check']);\n\n  grunt.registerTask('build', [\n    'sass',\n    'cssmin',\n    'uglify'\n  ]);\n\n  grunt.registerTask('watch-css', ['watch:css']);\n  grunt.registerTask('default', []);\n};\n"
  },
  {
    "path": "mfb/LICENSE",
    "content": "The MIT License (MIT)\n\nCopyright (c) 2014 \n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\n"
  },
  {
    "path": "mfb/README.md",
    "content": "Material Floating Button\n========================\n\nMaterial design floating button action implementation.\n\nMade to be semantic, fast and easy to customize.\n~~Shamelessly~~ inspired by action buttons from Google Inbox, Evernote and Path.\n\nSee a demo [here](http://nobitagit.github.io/material-floating-button/) to see it in action or just take a look at this awesome gif:\n\n<img src=\"http://zippy.gfycat.com/LimitedTatteredFieldmouse.gif\">\n\nTest all the available effects to date in the [demo](http://nobitagit.github.io/material-floating-button/).\n\n##Other versions##\nAlso available as:\n\n- [Angular directive](https://github.com/nobitagit/ng-material-floating-button)\n- [React Component](https://github.com/nobitagit/react-material-floating-button)\n\n##How to use##\n###Basic usage###\nClone/download the repo from Github or just use npm:\n```\nnpm install mfb --save\n```\n\n(Optionally) run `npm install` to have access to the configured Grunt tasks if you use them, then reference the basic css styles in your `<head>` like so:\n\n```html\n<link href=\"path/to/css/mfb.css\" rel=\"stylesheet\">\n```\n\nUse the appropriate html structure (better explained later), for example:\n\n```html\n<ul class=\"mfb-component--tl mfb-slidein\" data-mfb-hover>\n  <!-- the menu content -->\n</ul>\n```\nEverything should already work fine.\n\nYou may or may not want to include the provided `mfb.js` script depending on the need to support click/touch.\n\n```html\n<script src=\"path/to/js/mfb.js\"></script>\n```\n\nFor a breakdown on why and when you need to include the script please refer to [Toggling options and touch devices support](#toggling-opts).\n\n###Customising the component###\n####HTML####\nThe basic structure of the component is the following (the customisable classes/attributes are in curly braces):\n\n```html\n<ul class=\"{{placement-class}} {{effect-class}}\" {{hover/click-to-open}} {{menu-state}}>\n  <li class=\"mfb-component__wrap\">\n    <!-- the main menu button -->\n    <a data-mfb-label=\"{{the label text of the main button}}\" class=\"mfb-component__button--main\">\n      <!-- the main button icon visibile by default -->\n      <i class=\"mfb-component__main-icon--resting {{icon-class}}\"></i>\n      <!-- the main button icon visibile when the user is hovering/interacting with the menu -->\n      <i class=\"mfb-component__main-icon--active {{active-icon-class}}\"></i>\n    </a>\n    <ul class=\"mfb-component__list\">\n      <!-- a child button, repeat as many times as needed -->\n      <li>\n        <a href=\"link.html\" data-mfb-label=\"{{the label text of the a child button}}\" class=\"mfb-component__button--child\">\n          <i class=\"mfb-component__child-icon {{icon-class}}\"></i>\n        </a>\n      </li>\n    </ul>\n  </li>\n</ul>\n```\n\n####SCSS/CSS####\n\nAlthough you can use the provided css as is, it's highly likely that you will want to customise the looks and behavior of the component by changing its underlying css. A number of variables is provided for your convenience in the SASS file.\n\nThe best way to tweak them is leave the `src/mfb.scss` source as is, import it in your own style sheet and define your custom variables before the `@import` statement right there. For example:\n\n```scss\n// your .scss working file\n$main-color: #4991EF;\n\n@import \"path/to/src/mfb.scss\";\n```\n\nThis will leave the core files unchanged from the source. You will then be able to keep this repo as upstream and pull in any future changes without having to worry about overwriting your changes.\n\nHere below is a breakdown of all the variables currently available, along with their defaults.\n\n#####Basic#####\n\nVariable name | Default value | Explanation\n--- | --- | ---\n$main-color | #E40A5D | main/primary color of the component\n$bright-text | rgba(255, 255, 255, 0.8) | color of icons and text\n$number-of-child-buttons | 4 | how many child buttons the component supports\n\n#####Effects#####\n**n.b.** - set to true to include the effect styles in the compiled .css file. To actually activate the desired effect you need to reference the corresponding class in the markup (see [here](#html))\n\nVariable name | Default value\n--- | ---\n$effects-zoomin | true\n$effects-slidein | true\n$effects-slidein-spring | true\n$effects-fountain | true\n\nAs a suggestion, try to only include the animation you're using in production in order to have a much lighter css.\n\n#####Speeds#####\n\nVariable name | Default value | Explanation\n--- | --- | ---\n$delay-staggering-inflate | 0.1s | each child button can appear with a slight, more natural delay (set to 0 for no-delay)\n$slide-speed | 0.5s | the child buttons animate at this speed\n$label-hover-off | 0.5s | the child buttons labels fade *in* at this speed\n$label-hover-on | 0.3s | the child buttons labels fade *out* at this speed\n\n#####Sizes#####\n\nVariable name | Default value | Explanation\n--- | --- | ---\n$main_button_size | 25px | the distance of the main button from the closest corners of the screen\n$labels-font-size | 13px |font-size for all labels\n$labels-padding-vertical | 4px | top & bottom padding for the labels\n$labels-padding-horizontal | 10px | left & right padding for the labels\n\nYou can compile the final css on your own or use the provided, pre-configured Grunt tasks for it. After installing all dependencies (by running `npm install` from the terminal) type `grunt sass` (on time compilation) or `grunt watch-css` (live reload triggered after the scss files are changed).\n\n<a name=\"toggling-opts\"></a>\n####Toggling options and touch devices support####\nThe menu can be customised to be activated either on hover or on click/tap. To assign the desired toggling method the component provides some attributes to add this functionality in a declarative way right from the markup.\n\n#####Hover toggling#####\n\nIf you're only interested in desktop support and want the menu to be activated on hover you won't need to include any scripts as that animation is CSS-based and included in the stylesheet provided. Just set the `data-mfb-toggle` attribute to `hover` like so:\n\n```html\n<ul class=\"mfb-component--tl mfb-slidein\" data-mfb-toggle=\"hover\">\n```\n\n#####Click toggling#####\n\nTo add click and touch support (and to support the open/close animation programmatically, more on this later) include the `mfb.js` file and reference it in the page. Finally set the `data-mfb-toggle` attribute to `click`, along with the initial state you want the menu to appear at load time, using the `data-mfb-state` attribute. An example:\n\n```html\n<ul class=\"mfb-component--tl mfb-slidein\" data-mfb-toggle=\"click\" data-mfb-state=\"closed\">\n```\n\nIf you want the menu to appear open at load time, do this instead:\n\n```html\n<ul class=\"mfb-component--tl mfb-slidein\" data-mfb-toggle=\"click\" data-mfb-state=\"open\">\n```\n\n#####Hover toggling along with touch support#####\n\nIf you want the menu to work on hover but need support for touch devices you first need to include Modernizr to detect touch support. If you are alreay using it in your project just make sure that the touch detection is enabled.\n\nIf you're not using Modernizr already, just include the provided `modernizr.touch.js` script (look in the `src/lib/` folder) in your `<head>` or get the latest version of this very script right from [here](http://modernizr.com/download/#-touch-teststyles-prefixes). Note that this is a custom build and will only detect for touch support, it's not the full library.\n\nThen include the `mfb.js` file, ideally at the bottom of your page.\nOnce the scripts are in place just set up a normal button with hover toggling like so:\n\n```html\n<ul class=\"mfb-component--tl mfb-slidein\" data-mfb-toggle=\"hover\">\n```\n\nThe script will take care of changing the behavior when the page is viewed from a touch enabled device.\n\n#####Opening/closing the menu programmatically#####\n\nIf you need to close the menu after a certain event (or open it without user interaction) you can easily do so just by setting its state to `closed` or `open`. Once you have selected the menu in your desired way just close it like so:\n\n```js\nmenu.setAttribute('data-mfb-state', 'closed');\n```\nOr open it with:\n\n```js\nmenu.setAttribute('data-mfb-state', 'open');\n```\n\n##Contributions?##\nYes please!\nIf you submit a PR please add the relative documentation in this README (if needed) and don't forget to add you name and/or email to the contributors list in the package.json file.\n\n##Credits##\n- Andrey Sitnik's [Easings.net](http://easings.net/) for visualizing animations.\n- Demo icons courtesy of [Ionicons](ionicons.com).\n- All the [contributors](https://github.com/nobitagit/material-floating-button/graphs/contributors) to this project.\n\n##Todos##\n\n- [x] provide minified script and stylesheet\n- [ ] replace `@extend`s as much as possible from the SCSS to optimize output\n- [ ] more animations\n- [ ] add to bower\n- [ ] provide more variables/get rid of currently hard-coded values\n"
  },
  {
    "path": "mfb/package.json",
    "content": "{\n  \"name\": \"mfb\",\n  \"version\": \"0.12.0\",\n  \"description\": \"html component for a material menu à la Path and Google Inbox\",\n  \"main\": \"index.html\",\n  \"repository\": \"https://github.com/nobitagit/material-floating-button\",\n  \"keywords\": [\n    \"component\",\n    \"material\",\n    \"design\",\n    \"menu\",\n    \"css\"\n  ],\n  \"bugs\": \"https://github.com/nobitagit/material-floating-button/issues\",\n  \"author\": \"Nobita\",\n  \"contributors\": [\n    {\n    \"name\": \"Maxence Winandy\",\n    \"email\": \"maxence.winandy@gmail.com\"\n    },\n    {\n    \"name\": \"Christian Flach\",\n    \"email\": \"cmfcmf.flach@gmail.com\"\n    }\n  ],\n  \"license\": \"MIT\",\n  \"devDependencies\": {\n    \"grunt\": \"^0.4.5\",\n    \"grunt-contrib-clean\": \"^0.6.0\",\n    \"grunt-contrib-cssmin\": \"^0.12.2\",\n    \"grunt-contrib-sass\": \"^0.8.1\",\n    \"grunt-contrib-uglify\": \"^0.8.0\",\n    \"grunt-contrib-watch\": \"^0.6.1\",\n    \"grunt-gh-pages\": \"^0.9.1\"\n  }\n}\n"
  },
  {
    "path": "mfb/src/_/_fountain.scss",
    "content": "@mixin effects-fountain{\n\n/**\n * FOUNTAIN\n * When hovering the main button the child buttons\n * jump into view from outside the viewport\n */\n\n  .mfb-component--tl.mfb-fountain,\n  .mfb-component--tr.mfb-fountain{\n    .mfb-component__list{\n      li{\n        -webkit-transform: scale(0);\n        transform: scale(0);\n      }\n      @for $i from 1 through $number-of-child-buttons {\n        $distance: -1 * $button-space * $i;\n        li:nth-child( #{$i} ) { \n          -webkit-transform: translateY($distance) scale(0);\n                  transform: translateY($distance) scale(0);\n          transition: all $slide-speed;\n          // this is the delay at which the buttons start disappearing\n          transition-delay: ( $number-of-child-buttons - $i ) * 0.05s;        \n        }          \n      }     \n    }\n    &[data-mfb-toggle=\"hover\"]:hover,\n    &[data-mfb-state=\"open\"]{\n      .mfb-component__list{\n        @for $i from 1 through $number-of-child-buttons {\n          $distance: $button-space * $i;\n          li:nth-child( #{$i} ) { \n            -webkit-transform: translateY($distance) scale(1); \n                    transform: translateY($distance) scale(1); \n            // this is the delay at which the buttons appear          \n            transition-delay: $i * 0.05s;\n          }          \n        }                \n      }\n    }\n  }\n\n  .mfb-component--bl.mfb-fountain,\n  .mfb-component--br.mfb-fountain{\n    .mfb-component__list{\n      li{\n        -webkit-transform: scale(0);\n                transform: scale(0);\n      }\n      @for $i from 1 through $number-of-child-buttons {\n        $distance: $button-space * $i;\n        li:nth-child( #{$i} ) { \n          -webkit-transform: translateY($distance) scale(0);\n                  transform: translateY($distance) scale(0);\n          transition: all $slide-speed;\n          // this is the delay at which the buttons start disappearing\n          transition-delay: ( $number-of-child-buttons - $i ) * 0.05s;        \n        }          \n      }     \n    }\n    &[data-mfb-toggle=\"hover\"]:hover,\n    &[data-mfb-state=\"open\"]{\n      .mfb-component__list{\n        @for $i from 1 through $number-of-child-buttons {\n          $distance: -1 * $button-space * $i;\n          li:nth-child( #{$i} ) { \n            -webkit-transform: translateY($distance) scale(1); \n                    transform: translateY($distance) scale(1); \n            // this is the delay at which the buttons appear          \n            transition-delay: $i * 0.05s;\n          }          \n        }                \n      }\n    }\n  }\n\n}\n"
  },
  {
    "path": "mfb/src/_/_slidein-spring.scss",
    "content": "@mixin effects-slidein-spring{\n\n/**\n * SLIDE IN SPRING\n * When hovering the main button, the child buttons slide out from beneath\n * the main button while transitioning from transparent to opaque.\n *\n */\n  .mfb-component--tl.mfb-slidein-spring,\n  .mfb-component--tr.mfb-slidein-spring{\n    .mfb-component__list li{\n      opacity: 0;\n      transition: all $slide-speed cubic-bezier(0.68, -0.55, 0.265, 1.55);\n    }\n    &[data-mfb-toggle=\"hover\"]:hover,\n    &[data-mfb-state=\"open\"]{\n      .mfb-component__list{\n        li{\n          opacity: 1;\n        }\n        @for $i from 1 through $number-of-child-buttons {\n          $distance: $button-space * $i;\n          li:nth-child( #{$i} ) {\n            -webkit-transform: translateY( $distance );\n                    transform: translateY( $distance ); }\n        }\n      }\n    }\n  }\n\n  .mfb-component--bl.mfb-slidein-spring,\n  .mfb-component--br.mfb-slidein-spring{\n    .mfb-component__list li{\n      opacity: 0;\n      transition: all $slide-speed cubic-bezier(0.68, -0.55, 0.265, 1.55);\n    }\n    &[data-mfb-toggle=\"hover\"]:hover,\n    &[data-mfb-state=\"open\"]{\n      .mfb-component__list{\n        li{\n          opacity: 1;\n        }\n        @for $i from 1 through $number-of-child-buttons {\n          $distance: -1 * $button-space * $i;\n          li:nth-child( #{$i} ) { -webkit-transform: translateY( $distance );\n                                         transform: translateY( $distance ); }\n        }\n      }\n    }\n  }\n\n}\n"
  },
  {
    "path": "mfb/src/_/_slidein.scss",
    "content": "@mixin effects-slidein{\n\n/**\n * SLIDE IN + FADE\n * When hovering the main button, the child buttons slide out from beneath\n * the main button while transitioning from transparent to opaque.\n *\n */\n\n  .mfb-component--tl.mfb-slidein,\n  .mfb-component--tr.mfb-slidein{\n    .mfb-component__list li{\n      opacity: 0;\n      transition: all $slide-speed;\n    }\n    &[data-mfb-toggle=\"hover\"]:hover,\n    &[data-mfb-state=\"open\"]{\n      .mfb-component__list{\n        li{\n          opacity: 1;         \n        }\n        @for $i from 1 through $number-of-child-buttons {\n          $distance: $button-space * $i;\n          li:nth-child( #{$i} ) { \n            -webkit-transform: translateY( $distance ); \n                    transform: translateY( $distance ); }          \n        }                \n      }\n    }\n  }\n\n  .mfb-component--bl.mfb-slidein,\n  .mfb-component--br.mfb-slidein{\n    .mfb-component__list li{\n      opacity: 0;\n      transition: all $slide-speed;\n    }\n    &[data-mfb-toggle=\"hover\"]:hover,\n    &[data-mfb-state=\"open\"]{\n      .mfb-component__list{\n        li{\n          opacity: 1;         \n        }\n        @for $i from 1 through $number-of-child-buttons {\n          $distance: -1 * $button-space * $i;\n          li:nth-child( #{$i} ) { -webkit-transform: translateY( $distance ); \n                                         transform: translateY( $distance ); }          \n        }                \n      }\n    }\n  }\n\n}\n"
  },
  {
    "path": "mfb/src/_/_zoomin.scss",
    "content": "@mixin effects-zoomin{\n\n/**\n * ZOOM-IN\n * When hovering the main button, the child buttons grow\n * from zero to normal size.\n *\n */\n\n  .mfb-component--tl.mfb-zoomin,\n  .mfb-component--tr.mfb-zoomin{\n    .mfb-component__list{\n      li{\n        -webkit-transform: scale(0);\n                transform: scale(0);\n      }\n      @for $i from 1 through $number-of-child-buttons {\n        $distance: $button-space * $i;\n        li:nth-child( #{$i} ) { \n          -webkit-transform: translateY($distance) scale(0);\n                  transform: translateY($distance) scale(0);\n          transition: all $slide-speed;\n          // this is the delay at which the buttons *disappear*\n          transition-delay: ( $number-of-child-buttons - $i ) * 0.05s;        \n        }          \n      }     \n    }\n    &[data-mfb-toggle=\"hover\"]:hover,\n    &[data-mfb-state=\"open\"]{\n      .mfb-component__list{\n        @for $i from 1 through $number-of-child-buttons {\n          $distance: $button-space * $i;\n          li:nth-child( #{$i} ) { \n            -webkit-transform: translateY($distance) scale(1); \n                    transform: translateY($distance) scale(1); \n            // this is the delay at which the buttons *appear*\n            transition-delay: $i * 0.05s;\n          }          \n        }                \n      }\n    }\n  }\n\n  .mfb-component--bl.mfb-zoomin,\n  .mfb-component--br.mfb-zoomin{\n    .mfb-component__list{\n      li{\n        -webkit-transform: scale(0);\n                transform: scale(0);\n      }\n      @for $i from 1 through $number-of-child-buttons {\n        $distance: -1 * $button-space * $i;\n        li:nth-child( #{$i} ) { \n          -webkit-transform: translateY($distance) scale(0);\n                  transform: translateY($distance) scale(0);\n          transition: all $slide-speed;\n          // this is the delay at which the buttons start disappearing\n          transition-delay: ( $number-of-child-buttons - $i ) * 0.05s;        \n        }          \n      }     \n    }\n    &[data-mfb-toggle=\"hover\"]:hover,\n    &[data-mfb-state=\"open\"]{\n      .mfb-component__list{\n        @for $i from 1 through $number-of-child-buttons {\n          $distance: -1 * $button-space * $i;\n          li:nth-child( #{$i} ) { \n            -webkit-transform: translateY($distance) scale(1); \n                    transform: translateY($distance) scale(1); \n            // this is the delay at which the buttons appear          \n            transition-delay: $i * 0.05s;\n          }          \n        }                \n      }\n    }\n  }\n\n}\n"
  },
  {
    "path": "mfb/src/index.css",
    "content": "html, body{\n  height: 100%;\n  min-height: 100%;\n}\nhtml{\n  background: #E9EBEC;\n  font-family: 'Raleway', sans-serif;\n  font-weight: 200;\n  -ms-touch-action: manipulation;\n  touch-action: manipulation;  \n}\nbody{\n  display: -webkit-flex;  \n  -webkit-align-items: center;\n  -webkit-justify-content: center;\n    \n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\nh1{\n  margin: 0.2em 0; \n  color: rgba(40, 33, 33, .7);\n  color: rgba(124, 98, 152, 1);\n  font-weight: 400;\n}\nheader{\n  background: #00C8BE;\n  padding: 0.3em 1em;\n  position: relative;\n  z-index: 20;\n}\n.viewCode header{\n  box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);\n}\n.showcode{\n  background: rgb(232, 216, 49);\n  color: rgba(124, 98, 152, 1);\n  width: 40px;\n  height: 40px;\n  text-align: center;\n  position: absolute;\n  right: 1em;\n  bottom: 0;\n  margin-bottom: -15px;\n  border-radius: 100%;\n  font-size: 16px;\n  cursor: pointer;\n  box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);\n  transition: all .3s;\n}\n.viewCode .showcode{\n  -webkit-transform: rotateX(-180deg);\n  transform: rotateX(-180deg);\n  box-shadow: 0px -2px 5px 0 rgba(0, 0, 0, 0.26);      \n} \n.icon-nocode, .icon-yepcode{\n  transition: opacity .3s;\n  position: absolute;\n  left: 0;\n  display: block;\n  width: 100%;\n  line-height: 40px;      \n}    \n.icon-nocode{\n  opacity: 0;\n}\n.viewCode .icon-nocode{\n  opacity: 1;\n}\n.viewCode .icon-yepcode{\n  opacity: 0;\n}     \n.panel{\n  width: 90%;\n  position: relative;\n  max-width: 650px;\n  box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);\n  background: #F5F5F5;\n  border-radius: 3px;\n  overflow: hidden;      \n}\narticle{\n  min-height: 180px;\n  padding: 1em;\n  font-weight: 200;\n  line-height: 1.5em;\n  position: relative;\n}\nfooter{\n  padding: 0.3em 1em 1em;\n}\nfooter a, footer a:active, footer a:visited{\n  color: inherit;\n}\n.code{\n  position: absolute;\n  top: 0;\n  top: 0;\n  left: 0;\n  right: 0;      \n  height: 100%;\n  overflow: scroll;\n  background: rgba(124, 98, 152, 0.94);\n  color: rgba(245, 247, 247, 0.92);    \n  padding: 0em 1em; \n  transition: all .4s;\n  -webkit-transform: translateY(-100%);\n  transform: translateY(-100%);\n}\n.code p:first-child{\n  margin-top: 2em;\n}\n.code a{\n  color: rgba(232, 216, 49, 0.9);\n}\n.viewCode .code{\n  -webkit-transform: translateY(0);\n  transform: translateY(0);\n  box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.36);      \n}   \n.actions{\n  font-weight: 300;\n  text-transform: uppercase;\n  font-size: 0.8em;\n  padding: 1em;\n  border: none;\n  background: none;\n  transition: color .2s;\n  cursor: pointer;\n}\n.actions:hover{\n  color: rgb(30, 30, 171);\n  background: #F5F5F5;      \n  box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);\n}\n\ncode, pre {\n  background: rgba(255,255,255,0.1);\n  color:  rgba(232, 216, 49, 0.9);\n  font-family: \"Source Code Pro\", Monaco, Menlo, Consolas, \"Courier New\",monospace;\n  padding: 0.5em;\n  border-radius: 3px;\n  margin: 1em 0;  \n}   \ncode{\n  display: inline;\n  vertical-align: middle;\n  margin: 0;\n}\npre{\n  display: block;\n}\n.striked{\n text-decoration: line-through;  \n} \n.mfb-component--tl{\n  animation: fromTop 1s 1;\n  -webkit-animation: fromTop 1s 1;\n}\n.mfb-component--tr{\n  animation: fromTop 1.3s 1;\n  -webkit-animation: fromTop 1.3s 1;\n} \n.mfb-component--br{\n  animation: fromBottom 1.6s 1;\n  -webkit-animation: fromBottom 1.6s 1;\n}\n.mfb-component--bl{\n  animation: fromBottom 1.9s 1;\n  -webkit-animation: fromBottom 1.9s 1;\n}        \n@keyframes fromBottom {\n  0% {\n    transform: translateY(250px);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n@keyframes fromTop {\n  0% {\n    transform: translateY(-250px);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n@-webkit-keyframes fromBottom {\n  0% {\n    transform: translateY(250px);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}    \n@-webkit-keyframes fromTop {\n  0% {\n    transform: translateY(-250px);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}   "
  },
  {
    "path": "mfb/src/index.html",
    "content": "<!DOCTYPE HTML>\n<html class=\"\">\n  <head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css\">\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/ionicons/1.5.2/css/ionicons.css\">\n    <link href='http://fonts.googleapis.com/css?family=Raleway:100,200,300,400' rel='stylesheet' type='text/css'>\n    <script src=\"lib/modernizr.touch.js\"></script>\n    <link href=\"index.css\" rel=\"stylesheet\">\n    <link href=\"mfb.css\" rel=\"stylesheet\">\n    <title>Material floating button. The index.</title>\n  </head>\n  <body>\n\n    <ul id=\"menu\" class=\"mfb-component--br mfb-zoomin\" data-mfb-toggle=\"hover\">\n      <li class=\"mfb-component__wrap\">\n        <a href=\"#\" data-mfb-label=\"A long long label\" class=\"mfb-component__button--main\">\n          <i class=\"mfb-component__main-icon--resting ion-plus-round\"></i>\n          <i class=\"mfb-component__main-icon--active ion-edit\"></i>\n        </a>\n        <ul class=\"mfb-component__list\">\n          <li>\n            <a href=\"#\" data-mfb-label=\"Add\" data-mfb-label=\"label with long long title\" class=\"mfb-component__button--child\">\n              <i class=\"mfb-component__child-icon ion-paper-airplane\"></i>\n            </a>\n          </li>\n          <li>\n            <a href=\"#\" data-mfb-label=\"Add\" class=\"mfb-component__button--child\">\n              <i class=\"mfb-component__child-icon ion-paperclip\"></i>\n            </a>\n          </li>\n\n          <li>\n            <a href=\"#\" data-mfb-label=\"Add\" class=\"mfb-component__button--child\">\n              <i class=\"mfb-component__child-icon ion-calendar\"></i>\n            </a>\n          </li>\n\n          <li>\n            <a href=\"#\" data-mfb-label=\"Add\" class=\"mfb-component__button--child\">\n              <i class=\"mfb-component__child-icon ion-key\"></i>\n            </a>\n          </li>\n        </ul>\n      </li>\n    </ul>\n\n    <section id=\"panel\" class=\"panel\">\n      <header>\n        <h1>\n          Material Floating Buttons\n        </h1>\n        <span id=\"showcode\" class=\"showcode\">\n          <i class=\"ion-eye icon-yepcode\"></i>\n          <i class=\"ion-eye-disabled icon-nocode\"></i>\n        </span>\n      </header>\n      <article>\n        <p>\n          Customizable, semantic Material button implementation. <br>\n          <span class=\"striked\">Shamelessly</span> Openly inspired by Google Inbox, Evernote and Path.\n        </p>\n        <p>\n          To add Material Floating Buttons to any project just download or clone the repo from Github.<br>\n          Try it yourself by selecting a style here below, or click on the yellow button here above for a code preview and refer to the docs more info.\n        </p>\n        <p>\n          <select id=\"selections-fx\">\n            <option value=\" mfb-zoomin \" selected>Zoom in</option>\n            <option value=\" mfb-slidein \">Slide in</option>\n            <option value=\" mfb-fountain \">Fountain</option>\n            <option value=\"  mfb-slidein-spring \">Slide in</option>\n          </select>\n\n          <select id=\"selections-pos\">\n            <option value=\"mfb-component--tl \">top left</option>\n            <option value=\"mfb-component--tr \">top right</option>\n            <option value=\"mfb-component--bl \">bottom left</option>\n            <option value=\"mfb-component--br \" selected>bottom right</option>\n          </select>\n        </p>\n\n\n\n        <div class=\"code\">\n          <p>\n            To add Material Floating Buttons to any project just download the files from here below or clone the repo from Github. <br>\n          </p>\n          <pre>git clone https://github.com/nobitagit/polymer-slidenav.git</pre>\n          <p>\n            After referencing the styles in your header drop the MFB markup in your HTML like so:\n          </p>\n<pre>&lt;ul class=\"mfb-component--br mfb-slidein\" data-mfb-toggle=\"hover\"&gt;\n  &lt;li class=\"mfb-component__wrap\"&gt;\n    &lt;a href=\"#\" data-mfb-label=\"A label\" class=\"mfb-component__button--main\"&gt;\n      &lt;ul class=\"mfb-component__list\"&gt;\n        &lt;li&gt;\n          &lt;a href=\"#\" data-mfb-label=\"Add\" data-mfb-label=\"label with long long title\" class=\"mfb-component__button--child\"&gt;\n            &lt;i class=\"mfb-component__child-icon ion-paper-airplane\"&gt;&lt;/i&gt;\n          &lt;/a&gt;\n        &lt;/li&gt;\n      &lt;/ul&gt;\n  &lt;/li&gt;\n&lt;/ul&gt;</pre>\n          <p>\n            The two classes of the main <code>&lt;ul&gt;</code> tag define the position of the component and its associated animation. The rest of the code always stays the same regardless of position and animation chosen. Refer to the docs or to the showcase for a thorough explanation.\n          </p>\n          <p>\n            The best way to integrate MFB in existing projects is to build the styles directly from the source. The scss file is filled with customizable variables. From there choose your favorite colors and sizes and then compile the css.\n          </p>\n          <p>\n            If you use <a href=\"http://gruntjs.com/\">Grunt</a> and have cloned the repo just run <code>grunt build</code> or <code>grunt watch</code> to have automatic compilation.\n          </p>\n        </div>\n\n      </article>\n      <footer>\n        <a href=\"https://github.com/nobitagit/material-floating-button\"\n        >\n          <button class=\"actions\">\n            <i class=\"ion-social-github\"></i> View on Github\n          </button>\n        </a>\n        <a href=\"http://twitter.com/share?text=Check this material floating button component!&url=http://nobitagit.github.io/material-floating-button/&hashtags=material,design,button,css\">\n          <button class=\"actions\">\n            <i class=\"ion-social-twitter\"></i> Share on Twitter\n          </button>\n        </a>\n      </footer>\n    </section>\n\n  <script src=\"mfb.js\"></script>\n  <script>\n\n    var panel = document.getElementById('panel'),\n        menu = document.getElementById('menu'),\n        showcode = document.getElementById('showcode'),\n        selectFx = document.getElementById('selections-fx'),\n        selectPos = document.getElementById('selections-pos'),\n        // demo defaults\n        effect = 'mfb-zoomin',\n        pos = 'mfb-component--br';\n\n    showcode.addEventListener('click', _toggleCode);\n    selectFx.addEventListener('change', switchEffect);\n    selectPos.addEventListener('change', switchPos);\n\n    function _toggleCode() {\n      panel.classList.toggle('viewCode');\n    }\n\n    function switchEffect(e){\n      effect = this.options[this.selectedIndex].value;\n      renderMenu();\n    }\n\n    function switchPos(e){\n      pos = this.options[this.selectedIndex].value;\n      renderMenu();\n    }\n\n    function renderMenu() {\n      menu.style.display = 'none';\n      // ?:-)\n      setTimeout(function() {\n        menu.style.display = 'block';\n        menu.className = pos + effect;\n      },1);\n    }\n\n  </script>\n  </body>\n</html>\n"
  },
  {
    "path": "mfb/src/lib/modernizr.touch.js",
    "content": "/* Modernizr 2.8.3 (Custom Build) | MIT & BSD\n * Build: http://modernizr.com/download/#-touch-teststyles-prefixes\n */\n;window.Modernizr=function(a,b,c){function v(a){i.cssText=a}function w(a,b){return v(l.join(a+\";\")+(b||\"\"))}function x(a,b){return typeof a===b}function y(a,b){return!!~(\"\"+a).indexOf(b)}function z(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:x(f,\"function\")?f.bind(d||b):f}return!1}var d=\"2.8.3\",e={},f=b.documentElement,g=\"modernizr\",h=b.createElement(g),i=h.style,j,k={}.toString,l=\" -webkit- -moz- -o- -ms- \".split(\" \"),m={},n={},o={},p=[],q=p.slice,r,s=function(a,c,d,e){var h,i,j,k,l=b.createElement(\"div\"),m=b.body,n=m||b.createElement(\"body\");if(parseInt(d,10))while(d--)j=b.createElement(\"div\"),j.id=e?e[d]:g+(d+1),l.appendChild(j);return h=[\"&#173;\",'<style id=\"s',g,'\">',a,\"</style>\"].join(\"\"),l.id=g,(m?l:n).innerHTML+=h,n.appendChild(l),m||(n.style.background=\"\",n.style.overflow=\"hidden\",k=f.style.overflow,f.style.overflow=\"hidden\",f.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),f.style.overflow=k),!!i},t={}.hasOwnProperty,u;!x(t,\"undefined\")&&!x(t.call,\"undefined\")?u=function(a,b){return t.call(a,b)}:u=function(a,b){return b in a&&x(a.constructor.prototype[b],\"undefined\")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!=\"function\")throw new TypeError;var d=q.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(q.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(q.call(arguments)))};return e}),m.touch=function(){var c;return\"ontouchstart\"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:s([\"@media (\",l.join(\"touch-enabled),(\"),g,\")\",\"{#modernizr{top:9px;position:absolute}}\"].join(\"\"),function(a){c=a.offsetTop===9}),c};for(var A in m)u(m,A)&&(r=A.toLowerCase(),e[r]=m[A](),p.push((e[r]?\"\":\"no-\")+r));return e.addTest=function(a,b){if(typeof a==\"object\")for(var d in a)u(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b==\"function\"?b():b,typeof enableClasses!=\"undefined\"&&enableClasses&&(f.className+=\" \"+(b?\"\":\"no-\")+a),e[a]=b}return e},v(\"\"),h=j=null,e._version=d,e._prefixes=l,e.testStyles=s,e}(this,this.document);"
  },
  {
    "path": "mfb/src/mfb.js",
    "content": "/**\n * Material floating button\n * By: Nobita\n * Repo and docs: https://github.com/nobitagit/material-floating-button\n *\n * License: MIT\n */\n\n;(function ( window, document, undefined ) {\n\n  'use strict';\n\n  /**\n   * Some defaults\n   */\n  var clickOpt = 'click',\n      hoverOpt = 'hover',\n      toggleMethod = 'data-mfb-toggle',\n      menuState = 'data-mfb-state',\n      isOpen = 'open',\n      isClosed = 'closed',\n      mainButtonClass = 'mfb-component__button--main';\n\n  /**\n   * Internal references\n   */\n  var elemsToClick,\n      elemsToHover,\n      mainButton,\n      target,\n      currentState;\n\n  /**\n   * For every menu we need to get the main button and attach the appropriate evt.\n   */\n  function attachEvt( elems, evt ){\n    for( var i = 0, len = elems.length; i < len; i++ ){\n      mainButton = elems[i].querySelector('.' + mainButtonClass);\n      mainButton.addEventListener( evt , toggleButton, false);\n    }\n  }\n\n  /**\n   * Remove the hover option, set a click toggle and a default,\n   * initial state of 'closed' to menu that's been targeted.\n   */\n  function replaceAttrs( elems ){\n    for( var i = 0, len = elems.length; i < len; i++ ){\n      elems[i].setAttribute( toggleMethod, clickOpt );\n      elems[i].setAttribute( menuState, isClosed );\n    }    \n  }\n\n  function getElemsByToggleMethod( selector ){\n    return document.querySelectorAll('[' + toggleMethod + '=\"' + selector + '\"]');\n  }\n\n  /**\n   * The open/close action is performed by toggling an attribute\n   * on the menu main element. \n   *\n   * First, check if the target is the menu itself. If it's a child\n   * keep walking up the tree until we found the main element\n   * where we can toggle the state.\n   */   \n  function toggleButton( evt ){\n\n    target = evt.target;\n    while ( target && !target.getAttribute( toggleMethod ) ){\n      target = target.parentNode;\n      if(!target) { return; }\n    }\n\n    currentState = target.getAttribute( menuState ) === isOpen ? isClosed : isOpen;\n\n    target.setAttribute(menuState, currentState);\n   \n  }\n\n  /**\n   * On touch enabled devices we assume that no hover state is possible.\n   * So, we get the menu with hover action configured and we set it up\n   * in order to make it usable with tap/click.\n   **/\n  if ( window.Modernizr && Modernizr.touch ){\n    elemsToHover = getElemsByToggleMethod( hoverOpt );\n    replaceAttrs( elemsToHover );\n  }\n\n  elemsToClick = getElemsByToggleMethod( clickOpt );\n\n  attachEvt( elemsToClick, 'click' );\n\n})( window, document );"
  },
  {
    "path": "mfb/test/unit.js",
    "content": "/**\n * Currently there are no scripts along with this repo so no need to test anything. \n * \n **/ \n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"react-mfb\",\n  \"version\": \"0.6.0\",\n  \"description\": \"React component for a material menu à la Google Inbox and Evernote\",\n  \"author\": \"Nobita\",\n  \"contributors\": [],\n  \"license\": \"MIT\",\n  \"repository\": \"nobitagit/react-material-floating-button\",\n  \"engines\": {\n    \"node\": \">= 0.10\"\n  },\n  \"main\": \"index.js\",\n  \"files\": [\n    \"LICENSE\",\n    \"index.js\",\n    \"mfb.css\",\n    \"mfb.css.map\",\n    \"mfb.scss\",\n    \"build\"\n  ],\n  \"scripts\": {\n    \"build\": \"gulp\",\n    \"bro\": \"npm run build && browserify -t reactify demo/index.js -o demo/bundle.js\",\n    \"prepublish\": \"gulp\"\n  },\n  \"dependencies\": {\n    \"classnames\": \"^1.2.0\",\n    \"prop-types\": \"^15.5.10\",\n    \"react-dom\": \"^15.3.1\"\n  },\n  \"peerDependencies\": {\n    \"react\": \"^15.3.1\"\n  },\n  \"devDependencies\": {\n    \"browserify\": \"^9.0.3\",\n    \"grunt\": \"^0.4.5\",\n    \"grunt-contrib-clean\": \"^0.6.0\",\n    \"grunt-contrib-copy\": \"^0.8.0\",\n    \"grunt-contrib-jshint\": \"^0.10.0\",\n    \"grunt-contrib-sass\": \"^0.8.1\",\n    \"grunt-contrib-watch\": \"^0.6.1\",\n    \"grunt-gh-pages\": \"^0.9.1\",\n    \"grunt-usemin\": \"^3.0.0\",\n    \"gulp\": \"^3.8.11\",\n    \"gulp-babel\": \"^4.0.0\",\n    \"reactify\": \"^1.0.0\"\n  },\n  \"keywords\": [\n    \"component\",\n    \"css\",\n    \"design\",\n    \"facebook\",\n    \"material\",\n    \"react\",\n    \"react-component\",\n    \"reactjs\"\n  ]\n}\n"
  },
  {
    "path": "src/child-button.js",
    "content": "'use strict';\n\nvar React = require('react');\nvar classnames = require('classnames');\n\nclass ChildButton extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.handleOnClick = this.handleOnClick.bind(this);\n  }\n\n  handleOnClick() {\n    if (this.props.disabled === true) {\n      return;\n    }\n\n    if (this.props.onClick) {\n      this.props.onClick();\n    }\n  }\n\n  render() {\n    var iconClass = classnames('mfb-component__child-icon', this.props.icon);\n    var className = classnames('mfb-component__button--child',\n                               this.props.className,\n                               {\"mfb-component__button--disabled\": this.props.disabled});\n    return (\n      <li>\n        <a href={this.props.href}\n           data-mfb-label={this.props.label}\n           onClick={this.handleOnClick}\n           style={this.props.style}\n           className={className}>\n          <i className={iconClass}></i>\n        </a>\n      </li>\n    );\n  }\n}\n\nmodule.exports = ChildButton;\n"
  },
  {
    "path": "src/main-button.js",
    "content": "'use strict';\n\nvar React = require('react');\nvar classnames = require('classnames');\n\nclass MainButton extends React.Component {\n  constructor(props) {\n    super(props);\n  }\n\n  render() {\n    var iconResting = classnames('mfb-component__main-icon--resting', this.props.iconResting);\n    var iconActive = classnames('mfb-component__main-icon--active', this.props.iconActive);\n    var mainClass = classnames('mfb-component__button--main', this.props.className);\n    if (this.props.label) {\n      return (\n        <a href={this.props.href} style={this.props.style} className={mainClass} onClick={this.props.onClick} data-mfb-label={this.props.label}>\n          <i className={iconResting}></i>\n          <i className={iconActive}></i>\n        </a>\n      );\n    } else {\n      return (\n        <a href={this.props.href} style={this.props.style} className={mainClass} onClick={this.props.onClick}>\n          <i className={iconResting}></i>\n          <i className={iconActive}></i>\n        </a>\n      );\n    }\n  }\n}\n\nMainButton.defaultProps = {\n  href: '#',\n  onClick: function(){},\n  iconResting: '',\n  iconActive: '',\n  label: null\n};\n\nmodule.exports = MainButton;\n"
  },
  {
    "path": "src/menu.js",
    "content": "'use strict';\n\nvar React = require('react');\nvar PropTypes = require(\"prop-types\");\n\nvar getClasses = require('./utils/get-classes');\nvar getChildren = require('./utils/get-children');\nvar childrenValidator = require('./utils/children-validator');\n\nclass Menu extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      isOpen: false\n    };\n\n    this.toggleMenu = this.toggleMenu.bind(this);\n  }\n\n  toggleMenu(evt) {\n    evt.preventDefault();\n\n    if (this.props.method === 'hover') {\n      return;\n    }\n    // flip the state from open to close and viceversa\n    this.setState({\n      isOpen: !this.state.isOpen\n    });\n  }\n\n  render() {\n    var classes = getClasses(this.props);\n    var buttons = getChildren(this.props.children);\n\n    var main = buttons.main && React.cloneElement(buttons.main, {\n      onClick: this.toggleMenu\n    });\n\n    return (\n      <ul className={classes}\n          data-mfb-toggle={this.props.method}\n          data-mfb-state={this.state.isOpen ? 'open' : 'closed'}>\n        <li className=\"mfb-component__wrap\">\n          {main}\n          <ul className=\"mfb-component__list\">\n            {buttons.child}\n          </ul>\n        </li>\n      </ul>\n    );\n  }\n}\n\nMenu.propTypes = {\n  effect: PropTypes.oneOf(['zoomin', 'slidein', 'slidein-spring', 'fountain']).isRequired,\n  position: PropTypes.oneOf(['tl', 'tr', 'bl', 'br']).isRequired,\n  children: childrenValidator\n};\n\nmodule.exports = Menu;\n"
  },
  {
    "path": "src/utils/children-validator.js",
    "content": "'use strict';\n\nvar Children = require('react').Children;\n\nvar MainButton = require('../main-button');\nvar ChildButton = require('../child-button');\n\nfunction childrenValidator(props, propName, componentName){\n  var children = props[propName];\n  var mainButtonCount = 0;\n  var childButtonCount = 0;\n  var otherCount = 0;\n  var msg;\n  Children.forEach(children, function(child){\n    if(child.type === MainButton){\n      return mainButtonCount++;\n    }\n    if(child.type === ChildButton){\n      return childButtonCount++;\n    }\n    otherCount++;\n  });\n  if(mainButtonCount === 0){\n    msg = 'Prop `children` must contain a MainButton component in `' + componentName + '`.';\n    return new Error(msg);\n  }\n  if(mainButtonCount > 1){\n    msg = 'Prop `children` must contain only 1 MainButton component in `' +\n      componentName + '`, but ' + mainButtonCount + ' exist.';\n    return new Error(msg);\n  }\n  if(otherCount){\n    msg = 'Prop `children` contains elements other than MainButton and ChildButton ' +\n      'components in `' + componentName + '`.';\n    return new Error(msg);\n  }\n}\n\nmodule.exports = childrenValidator;\n"
  },
  {
    "path": "src/utils/get-children.js",
    "content": "'use strict';\n\nvar Children = require('react').Children;\n\nvar MainButton = require('../main-button');\n\nfunction getChildren(children){\n  var buttons = {\n    main: null,\n    child: []\n  };\n\n  Children.forEach(children, function(child){\n    if(child.type === MainButton){\n      buttons.main = child;\n      return;\n    }\n    buttons.child.push(child);\n  });\n\n  return buttons;\n}\n\nmodule.exports = getChildren;\n"
  },
  {
    "path": "src/utils/get-classes.js",
    "content": "'use strict';\n\nvar classnames = require('classnames');\n\nfunction getClasses(props){\n  return classnames({\n    'mfb-zoomin': props.effect === 'zoomin',\n    'mfb-slidein': props.effect === 'slidein',\n    'mfb-slidein-spring': props.effect === 'slidein-spring',\n    'mfb-fountain': props.effect === 'fountain',\n    'mfb-component--tl': props.position === 'tl',\n    'mfb-component--tr': props.position === 'tr',\n    'mfb-component--bl': props.position === 'bl',\n    'mfb-component--br': props.position === 'br'\n  }, props.className);\n}\n\nmodule.exports = getClasses;\n"
  }
]