Merge pull request #251 from FezVrasta/develop

Develop

Gruntfile.js

@@ -1,198 +1,227 @@
 module.exports = function(grunt) {
-    "use strict";
+  "use strict";
 
-    require("load-grunt-tasks")(grunt);
+  require("load-grunt-tasks")(grunt);
 
-    grunt.initConfig({
+  grunt.initConfig({
 
-        less: {
+    less: {
-            compileless: {
+      material: {
-                options: {
+        options: {
-                    paths: ["less"]
+          paths: ["less"],
-                },
+          sourceMap: true,
-                files: {
+          sourceMapRootpath: "/",
-                    "dist/css/material.css": "less/material.less",
+          sourceMapFilename: "dist/css/material.css.map",
-                    "dist/css/material-wfont.css": "less/material-wfont.less",
+          sourceMapURL: "material.css.map"
-                    "dist/css/ripples.css": "less/ripples.less"
-                }
-            }
         },
-
+        files: {
-        sass: {
+          "dist/css/material.css": "less/material.less",
-            compilesass: {
-                files: {
-                    "dist/css/material.css": "sass/material.scss",
-                    "dist/css/material-wfont.css": "sass/material-wfont.scss",
-                    "dist/css/ripples.css": "sass/ripples.scss"
-                }
-            }
-        },
-
-        autoprefixer: {
-            options: {
-                browsers: ["last 3 versions", "ie 8", "ie 9", "ie 10", "ie 11"]
-            },
-            prefix: {
-                files: {
-                    "dist/css/material.css": "dist/css/material.css",
-                    "dist/css/material-wfont.css": "dist/css/material-wfont.css",
-                    "dist/css/ripples.css": "dist/css/ripples.css"
-                }
-            }
-        },
-
-        cssmin: {
-            minifycss: {
-                expand: true,
-                cwd: "dist/css/",
-                src: ["*.css", "!*.min.css"],
-                dest: "dist/css/",
-                ext: ".min.css"
-            }
-        },
-
-        uglify: {
-            minifyjs: {
-                files: {
-                    "dist/js/material.min.js": "scripts/material.js",
-                    "dist/js/ripples.min.js": "scripts/ripples.js"
-                }
-            }
-        },
-
-        copy: {
-            distjs: {
-                expand: true,
-                cwd: "scripts/",
-                src: "**.min.js",
-                dest: "dist/js/",
-                flatten: true,
-                filter: "isFile"
-            },
-            distfonts: {
-                expand: true,
-                cwd: "fonts/",
-                src: "**",
-                dest: "dist/fonts/",
-                flatten: true,
-                filter: "isFile"
-            }
-        },
-
-        connect: {
-            options: {
-                port: 8040,
-                hostname: "localhost",
-                livereload: 35729
-
-            },
-            livereload: {
-                options: {
-                    open: true,
-                    base: "."
-                }
-            },
-            test: {
-                options: {
-                    port: 8041,
-                    open: "http://localhost:8041/_SpecRunner.html",
-                    base: "."
-                }
-            }
-        },
-
-        jasmine: {
-            scripts: "scripts/**/*.js",
-            options: {
-                build: true,
-                specs: "test/*Spec.js",
-                helpers: "test/*Helper.js",
-                vendor: [
-                    "https://code.jquery.com/jquery-1.10.2.min.js",
-                    "https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"
-                ]
-            }
-        },
-
-        jshint: {
-            options: {
-                jshintrc: ".jshintrc",
-                reporter: require("jshint-stylish")
-            },
-            all: [
-                "Gruntfile.js",
-                "scripts/**/*.js",
-                "template/**/*.js",
-                "!template/**/*.min.js"
-            ],
-            test: {
-                options: {
-                    jshintrc: "test/.jshintrc",
-                    src: ["test/**/*.js"]
-                }
-            }
-        },
-
-        watch: {
-            js: {
-                files: ["Gruntfile.js", "scripts/**/*.js", "template/**/*.js"],
-                tasks: ["newer:jshint:all"]
-            },
-            jsTest: {
-                files: ["test/**/*.js"],
-                tasks: ["newer:jshint:test", "jasmine"]
-            },
-            less: {
-                files:["less/**/*.less"],
-                tasks: ["default"]
-            },
-            sass: {
-                files: ["sass/**/*.scss", "sass/**/*.sass"],
-                tasks: ["scss"]
-            },
-            livereload: {
-                options: {
-                    livereload: "<%= connect.options.livereload %>"
-                },
-                files: [
-                    "index.html",
-                    "dist/css/**/*.css",
-                    "**/*.{png,jpg,jpeg,gif,webp,svg}"
-                ]
-            }
         }
-
+      },
-    });
+      materialWfont: {
-
+        options: {
-    grunt.registerTask("default", ["less", "autoprefixer", "cssmin", "uglify", "copy"]);
+          paths: ["less"],
-
+          sourceMap: true,
-    grunt.registerTask("scss", ["sass", "autoprefixer", "cssmin", "uglify", "copy"]);
+          sourceMapRootpath: "/",
-
+          sourceMapFilename: "dist/css/material-wfont.css.map",
-    grunt.registerTask("build", function(target) {
+          sourceMapURL: "material-wfont.css.map"
-        var buildType = "default";
+        },
-        if (target && target === "scss") {
+        files: {
-            buildType = "scss";
+          "dist/css/material-wfont.css": "less/material-wfont.less",
         }
+      },
+      ripples: {
+        options: {
+          paths: ["less"],
+          sourceMap: true,
+          sourceMapRootpath: "/",
+          sourceMapFilename: "dist/css/ripples.css.map",
+          sourceMapURL: "ripples.css.map"
+        },
+        files: {
+          "dist/css/ripples.css": "less/ripples.less",
+        }
+      }
+    },
 
-        grunt.task.run(["newer:jshint", "jasmine:scripts", buildType]);
+    sass: {
-    });
+      compilesass: {
+        files: {
+          "dist/css/material.css": "sass/material.scss",
+          "dist/css/material-wfont.css": "sass/material-wfont.scss",
+          "dist/css/ripples.css": "sass/ripples.scss"
+        }
+      }
+    },
 
-    grunt.registerTask("test", [
+    autoprefixer: {
-        "jasmine:scripts:build",
+      options: {
-        "connect:test:keepalive"
+        browsers: ["last 3 versions", "ie 8", "ie 9", "ie 10", "ie 11"]
+      },
+      prefix: {
+        files: {
+          "dist/css/material.css": "dist/css/material.css",
+          "dist/css/material-wfont.css": "dist/css/material-wfont.css",
+          "dist/css/ripples.css": "dist/css/ripples.css"
+        }
+      }
+    },
+
+    cssmin: {
+      minifycss: {
+        expand: true,
+        cwd: "dist/css/",
+        src: ["*.css", "!*.min.css"],
+        dest: "dist/css/",
+        ext: ".min.css"
+      }
+    },
+
+    uglify: {
+      options: {
+        sourceMap: true
+      },
+      minifyjs: {
+        files: {
+          "dist/js/material.min.js": "dist/js/material.js",
+          "dist/js/ripples.min.js": "dist/js/ripples.js"
+        }
+      }
+    },
+
+    copy: {
+      distjs: {
+        expand: true,
+        cwd: "scripts/",
+        src: "**.js",
+        dest: "dist/js/",
+        flatten: true,
+        filter: "isFile"
+      },
+      distfonts: {
+        expand: true,
+        cwd: "fonts/",
+        src: "**",
+        dest: "dist/fonts/",
+        flatten: true,
+        filter: "isFile"
+      }
+    },
+
+    connect: {
+      options: {
+        port: 8040,
+        hostname: "localhost",
+        livereload: 35729
+
+      },
+      livereload: {
+        options: {
+          open: true,
+          base: "."
+        }
+      },
+      test: {
+        options: {
+          port: 8041,
+          open: "http://localhost:8041/_SpecRunner.html",
+          base: "."
+        }
+      }
+    },
+
+    jasmine: {
+      scripts: "scripts/**/*.js",
+      options: {
+        build: true,
+        specs: "test/*Spec.js",
+        helpers: "test/*Helper.js",
+        vendor: [
+          "https://code.jquery.com/jquery-1.10.2.min.js",
+          "https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"
+        ]
+      }
+    },
+
+    jshint: {
+      options: {
+        jshintrc: ".jshintrc",
+        reporter: require("jshint-stylish")
+      },
+      all: [
+        "Gruntfile.js",
+        "scripts/**/*.js",
+        "template/**/*.js",
+        "!template/**/*.min.js"
+      ],
+      test: {
+        options: {
+          jshintrc: "test/.jshintrc",
+          src: ["test/**/*.js"]
+        }
+      }
+    },
+
+    watch: {
+      js: {
+        files: ["Gruntfile.js", "scripts/**/*.js", "template/**/*.js"],
+        tasks: ["newer:jshint:all"]
+      },
+      jsTest: {
+        files: ["test/**/*.js"],
+        tasks: ["newer:jshint:test", "jasmine"]
+      },
+      less: {
+        files:["less/**/*.less"],
+        tasks: ["default"]
+      },
+      sass: {
+        files: ["sass/**/*.scss", "sass/**/*.sass"],
+        tasks: ["scss"]
+      },
+      livereload: {
+        options: {
+          livereload: "<%= connect.options.livereload %>"
+        },
+        files: [
+          "index.html",
+          "dist/css/**/*.css",
+          "**/*.{png,jpg,jpeg,gif,webp,svg}"
+        ]
+      }
+    }
+
+  });
+
+  grunt.registerTask("default", ["less", "autoprefixer", "cssmin", "copy", "uglify"]);
+
+  grunt.registerTask("scss", ["sass", "autoprefixer", "cssmin", "copy", "uglify"]);
+
+  grunt.registerTask("build", function(target) {
+    var buildType = "default";
+    if (target && target === "scss") {
+      buildType = "scss";
+    }
+
+    grunt.task.run(["newer:jshint", "jasmine:scripts", buildType]);
+  });
+
+  grunt.registerTask("test", [
+    "jasmine:scripts:build",
+    "connect:test:keepalive"
+  ]);
+
+  grunt.registerTask("serve", function(target){
+    var buildTarget = "default";
+    if(target && target === "scss") {
+      buildTarget = "scss";
+    }
+    grunt.task.run([
+      "build:"+ buildTarget,
+      "connect:livereload",
+      "watch"
     ]);
+  });
 
-    grunt.registerTask("serve", function(target){
+  grunt.registerTask("cibuild",["newer:jshint", "jasmine:scripts"]);
-        var buildTarget = "default";
-        if(target && target === "scss") {
-            buildTarget = "scss";
-        }
-        grunt.task.run([
-            "build:"+ buildTarget,
-            "connect:livereload",
-            "watch"
-        ]);
-    });
-
-    grunt.registerTask("cibuild",["newer:jshint", "jasmine:scripts"]);
 };

README.md

@@ -1,5 +1,5 @@
 [![build status](https://travis-ci.org/FezVrasta/bootstrap-material-design.svg?branch=master)](https://travis-ci.org/FezVrasta/bootstrap-material-design)
-[![ghat status](http://mywebexpression.com:3001/status/initial/badge.png)](http://mywebexpression.com:3001/) (click to chat)
+[![gratipay](https://img.shields.io/gratipay/FezVrasta.svg)](https://gratipay.com/FezVrasta)
 
 [![banner](demo/imgs/banner.jpg)](#)
 
@@ -13,7 +13,6 @@ Check out [the demo at this link](http://fezvrasta.github.io/bootstrap-material-
 ## How to install
 
     BOWER:       bower install bootstrap-material-design --save
-    GEMS:        gem install bootstrap-material-design
 
 ## Use our CDN
 
@@ -173,4 +172,4 @@ Read more about [selectize.js](http://brianreavis.github.io/selectize.js/)
 
 # Compatibility
 
-Currently Material Design for Bootstrap supports Google Chrome (tested v37+), Mozilla Firefox (tested 30+), and Internet Explorer (tested 11+). Mobile browsers are not currently tested but it may work.
+Currently Material Design for Bootstrap supports Google Chrome (tested v37+), Mozilla Firefox (tested 30+), and Internet Explorer (tested 11+). Mobile browsers are not currently tested but it may work.

bower.json

@@ -1,16 +1,16 @@
 {
   "name": "Material Design for Bootstrap",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "homepage": "http://fezvrasta.github.io/bootstrap-material-design",
   "authors": [
     "Federico Zivolo <info@mywebexpression.com>"
   ],
   "description": "Material Design theme for Bootstrap 3",
   "main": [
-    "dist/css/material.min.css",
+    "dist/css/material.css",
-    "dist/js/material.min.js",
+    "dist/js/material.js",
-    "dist/css/ripples.min.css",
+    "dist/css/ripples.css",
-    "dist/js/ripples.min.js"
+    "dist/js/ripples.js"
   ],
   "ignore": [
     "test",

dist/css/material-wfont.css

@@ -2445,7 +2445,7 @@ body .well-primary,
 body .jumbotron-primary,
 .container .jumbotron-primary,
 .container-fluid .jumbotron-primary {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 body .well-success,
 .container .well-success,
@@ -2519,6 +2519,14 @@ body .jumbotron-material-indigo,
 .container-fluid .jumbotron-material-indigo {
   background-color: #3f51b5;
 }
+body .well-material-blue,
+.container .well-material-blue,
+.container-fluid .well-material-blue,
+body .jumbotron-material-blue,
+.container .jumbotron-material-blue,
+.container-fluid .jumbotron-material-blue {
+  background-color: #4285f4;
+}
 body .well-material-lightblue,
 .container .well-material-lightblue,
 .container-fluid .well-material-lightblue,
@@ -2640,7 +2648,7 @@ body .jumbotron-material-lightgrey,
   background-color: transparent;
 }
 .btn-primary:not(.btn-link):not(.btn-flat) {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .btn-success:not(.btn-link):not(.btn-flat) {
   background-color: #0f9d58;
@@ -2669,6 +2677,9 @@ body .jumbotron-material-lightgrey,
 .btn-material-indigo:not(.btn-link):not(.btn-flat) {
   background-color: #3f51b5;
 }
+.btn-material-blue:not(.btn-link):not(.btn-flat) {
+  background-color: #4285f4;
+}
 .btn-material-lightblue:not(.btn-link):not(.btn-flat) {
   background-color: #03a9f4;
 }
@@ -2710,7 +2721,7 @@ body .jumbotron-material-lightgrey,
   color: rgba(0, 0, 0, 0.84);
 }
 .btn-primary.btn-flat:not(.btn-link) {
-  color: #4285f4;
+  color: #009587;
 }
 .btn-success.btn-flat:not(.btn-link) {
   color: #0f9d58;
@@ -2739,6 +2750,9 @@ body .jumbotron-material-lightgrey,
 .btn-material-indigo.btn-flat:not(.btn-link) {
   color: #3f51b5;
 }
+.btn-material-blue.btn-flat:not(.btn-link) {
+  color: #4285f4;
+}
 .btn-material-lightblue.btn-flat:not(.btn-link) {
   color: #03a9f4;
 }
@@ -2810,7 +2824,7 @@ body .jumbotron-material-lightgrey,
 }
 .btn.btn-fab-primary,
 .btn.btn-fab:hover-primary {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .btn.btn-fab-success,
 .btn.btn-fab:hover-success {
@@ -2848,6 +2862,10 @@ body .jumbotron-material-lightgrey,
 .btn.btn-fab:hover-material-indigo {
   background-color: #3f51b5;
 }
+.btn.btn-fab-material-blue,
+.btn.btn-fab:hover-material-blue {
+  background-color: #4285f4;
+}
 .btn.btn-fab-material-lightblue,
 .btn.btn-fab:hover-material-lightblue {
   background-color: #03a9f4;
@@ -2933,7 +2951,7 @@ body .jumbotron-material-lightgrey,
   background-color: transparent;
 }
 .open > .dropdown-toggle.btn-primary {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .open > .dropdown-toggle.btn-success {
   background-color: #0f9d58;
@@ -2962,6 +2980,9 @@ body .jumbotron-material-lightgrey,
 .open > .dropdown-toggle.btn-material-indigo {
   background-color: #3f51b5;
 }
+.open > .dropdown-toggle.btn-material-blue {
+  background-color: #4285f4;
+}
 .open > .dropdown-toggle.btn-material-lightblue {
   background-color: #03a9f4;
 }
@@ -2998,6 +3019,12 @@ body .jumbotron-material-lightgrey,
 .open > .dropdown-toggle.btn-material-lightgrey {
   background-color: #ececec;
 }
+.btn-group .btn + .btn,
+.btn-group .btn + .btn-group,
+.btn-group .btn-group + .btn,
+.btn-group .btn-group + .btn-group {
+  margin-left: 0;
+}
 .btn-group,
 .btn-group-vertical {
   position: relative;
@@ -3034,10 +3061,6 @@ body .jumbotron-material-lightgrey,
   box-shadow: none !important;
   margin: 0;
 }
-.btn-group .btn:active .caret,
-.btn-group-vertical .btn:active .caret {
-  margin-left: -1px;
-}
 .btn-group-flat {
   box-shadow: none !important;
 }
@@ -3164,7 +3187,7 @@ body .jumbotron-material-lightgrey,
   background-color: #0f9d58;
 }
 .checkbox-primary input[type=checkbox]:checked ~ .check:after {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .checkbox-success input[type=checkbox]:checked ~ .check:after {
   background-color: #0f9d58;
@@ -3193,6 +3216,9 @@ body .jumbotron-material-lightgrey,
 .checkbox-material-indigo input[type=checkbox]:checked ~ .check:after {
   background-color: #3f51b5;
 }
+.checkbox-material-blue input[type=checkbox]:checked ~ .check:after {
+  background-color: #4285f4;
+}
 .checkbox-material-lightblue input[type=checkbox]:checked ~ .check:after {
   background-color: #03a9f4;
 }
@@ -3234,7 +3260,7 @@ body .jumbotron-material-lightgrey,
   color: #4caf50;
 }
 .checkbox-primary input[type=checkbox]:checked ~ .check:before {
-  color: #4285f4;
+  color: #009587;
 }
 .checkbox-success input[type=checkbox]:checked ~ .check:before {
   color: #0f9d58;
@@ -3263,6 +3289,9 @@ body .jumbotron-material-lightgrey,
 .checkbox-material-indigo input[type=checkbox]:checked ~ .check:before {
   color: #3f51b5;
 }
+.checkbox-material-blue input[type=checkbox]:checked ~ .check:before {
+  color: #4285f4;
+}
 .checkbox-material-lightblue input[type=checkbox]:checked ~ .check:before {
   color: #03a9f4;
 }
@@ -3304,7 +3333,7 @@ body .jumbotron-material-lightgrey,
   color: #4caf50;
 }
 .checkbox-primary input[type=checkbox]:checked ~ .check {
-  color: #4285f4;
+  color: #009587;
 }
 .checkbox-success input[type=checkbox]:checked ~ .check {
   color: #0f9d58;
@@ -3333,6 +3362,9 @@ body .jumbotron-material-lightgrey,
 .checkbox-material-indigo input[type=checkbox]:checked ~ .check {
   color: #3f51b5;
 }
+.checkbox-material-blue input[type=checkbox]:checked ~ .check {
+  color: #4285f4;
+}
 .checkbox-material-lightblue input[type=checkbox]:checked ~ .check {
   color: #03a9f4;
 }
@@ -3529,6 +3561,72 @@ body .jumbotron-material-lightgrey,
     opacity: 0;
   }
 }
+.togglebutton {
+  vertical-align: middle;
+}
+.togglebutton,
+.togglebutton * {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.togglebutton label {
+  font-weight: 400;
+  cursor: pointer;
+}
+.togglebutton label input[type=checkbox]:first-child {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.togglebutton label input[type=checkbox]:first-child:checked + .toggle {
+  background-color: rgba(0, 149, 135, 0.5);
+}
+.togglebutton label input[type=checkbox]:first-child:checked + .toggle:after {
+  background-color: #009587;
+}
+.togglebutton label .toggle,
+.togglebutton label input[type=checkbox][disabled]:first-child + .toggle {
+  content: "";
+  display: inline-block;
+  width: 30px;
+  height: 15px;
+  background-color: rgba(80, 80, 80, 0.7);
+  border-radius: 15px;
+  margin-right: 10px;
+  -webkit-transition: background 0.3s ease;
+          transition: background 0.3s ease;
+  vertical-align: middle;
+}
+.togglebutton label .toggle:after {
+  content: "";
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background-color: #F1F1F1;
+  border-radius: 20px;
+  position: relative;
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
+  left: -5px;
+  top: -2px;
+  -webkit-transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
+          transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
+}
+.togglebutton label input[type=checkbox][disabled]:first-child + .toggle:after,
+.togglebutton label input[type=checkbox][disabled]:checked:first-child + .toggle:after {
+  background-color: #BDBDBD;
+}
+.togglebutton label input[type=checkbox]:first-child:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 149, 135, 0.1);
+}
+.togglebutton label input[type=checkbox]:first-child ~ .toggle:active:after,
+.togglebutton label input[type=checkbox][disabled]:first-child ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
+}
+.togglebutton label input[type=checkbox]:first-child:checked + .toggle:after {
+  left: 15px;
+}
 .form-horizontal .radio {
   margin-bottom: 10px;
 }
@@ -3590,7 +3688,7 @@ body .jumbotron-material-lightgrey,
   background-color: rgba(0, 0, 0, 0.84);
 }
 .radio-primary input[type=radio]:checked ~ .check {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .radio-success input[type=radio]:checked ~ .check {
   background-color: #0f9d58;
@@ -3619,6 +3717,9 @@ body .jumbotron-material-lightgrey,
 .radio-material-indigo input[type=radio]:checked ~ .check {
   background-color: #3f51b5;
 }
+.radio-material-blue input[type=radio]:checked ~ .check {
+  background-color: #4285f4;
+}
 .radio-material-lightblue input[type=radio]:checked ~ .check {
   background-color: #03a9f4;
 }
@@ -3660,7 +3761,7 @@ body .jumbotron-material-lightgrey,
   border-color: rgba(0, 0, 0, 0.84);
 }
 .radio-primary input[type=radio]:checked ~ .circle {
-  border-color: #4285f4;
+  border-color: #009587;
 }
 .radio-success input[type=radio]:checked ~ .circle {
   border-color: #0f9d58;
@@ -3689,6 +3790,9 @@ body .jumbotron-material-lightgrey,
 .radio-material-indigo input[type=radio]:checked ~ .circle {
   border-color: #3f51b5;
 }
+.radio-material-blue input[type=radio]:checked ~ .circle {
+  border-color: #4285f4;
+}
 .radio-material-lightblue input[type=radio]:checked ~ .circle {
   border-color: #03a9f4;
 }
@@ -3841,7 +3945,7 @@ select[multiple].form-control.focus {
 }
 .form-control-wrapper .form-control:focus ~ .material-input:after,
 .form-control-wrapper .form-control.focus ~ .material-input:after {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .form-control-wrapper .form-control:focus:invalid ~ .material-input:before,
 .form-control-wrapper .form-control.focus:invalid ~ .material-input:before,
@@ -3858,7 +3962,7 @@ select[multiple].form-control.focus {
   width: 100%;
   left: 0;
   height: 2px;
-  background-color: #4285f4;
+  background-color: #009587;
   bottom: -1px;
   -webkit-transform: scaleX(0);
       -ms-transform: scaleX(0);
@@ -3955,10 +4059,10 @@ select[multiple].form-control.focus {
 }
 .form-group .material-input:before,
 .form-group-default .material-input:before {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .form-group-primary .material-input:before {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .form-group-success .material-input:before {
   background-color: #0f9d58;
@@ -3987,6 +4091,9 @@ select[multiple].form-control.focus {
 .form-group-material-indigo .material-input:before {
   background-color: #3f51b5;
 }
+.form-group-material-blue .material-input:before {
+  background-color: #4285f4;
+}
 .form-group-material-lightblue .material-input:before {
   background-color: #03a9f4;
 }
@@ -4025,10 +4132,10 @@ select[multiple].form-control.focus {
 }
 .form-group input.form-control:focus ~ .material-input:after,
 .form-group-default input.form-control:focus ~ .material-input:after {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .form-group-primary input.form-control:focus ~ .material-input:after {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .form-group-success input.form-control:focus ~ .material-input:after {
   background-color: #0f9d58;
@@ -4057,6 +4164,9 @@ select[multiple].form-control.focus {
 .form-group-material-indigo input.form-control:focus ~ .material-input:after {
   background-color: #3f51b5;
 }
+.form-group-material-blue input.form-control:focus ~ .material-input:after {
+  background-color: #4285f4;
+}
 .form-group-material-lightblue input.form-control:focus ~ .material-input:after {
   background-color: #03a9f4;
 }
@@ -4095,10 +4205,10 @@ select[multiple].form-control.focus {
 }
 .form-group input.form-control.focus ~ .material-input:after,
 .form-group-default input.form-control.focus ~ .material-input:after {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .form-group-primary input.form-control.focus ~ .material-input:after {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .form-group-success input.form-control.focus ~ .material-input:after {
   background-color: #0f9d58;
@@ -4127,6 +4237,9 @@ select[multiple].form-control.focus {
 .form-group-material-indigo input.form-control.focus ~ .material-input:after {
   background-color: #3f51b5;
 }
+.form-group-material-blue input.form-control.focus ~ .material-input:after {
+  background-color: #4285f4;
+}
 .form-group-material-lightblue input.form-control.focus ~ .material-input:after {
   background-color: #03a9f4;
 }
@@ -4168,7 +4281,7 @@ select[multiple].form-control.focus {
   color: rgba(0, 0, 0, 0.84);
 }
 .form-group-primary .control-label {
-  color: #4285f4;
+  color: #009587;
 }
 .form-group-success .control-label {
   color: #0f9d58;
@@ -4197,6 +4310,9 @@ select[multiple].form-control.focus {
 .form-group-material-indigo .control-label {
   color: #3f51b5;
 }
+.form-group-material-blue .control-label {
+  color: #4285f4;
+}
 .form-group-material-lightblue .control-label {
   color: #03a9f4;
 }
@@ -4235,10 +4351,10 @@ select[multiple].form-control.focus {
 }
 .form-group input.form-control:not(.empty) ~ .floating-label,
 .form-group-default input.form-control:not(.empty) ~ .floating-label {
-  color: #4285f4;
+  color: #009587;
 }
 .form-group-primary input.form-control:not(.empty) ~ .floating-label {
-  color: #4285f4;
+  color: #009587;
 }
 .form-group-success input.form-control:not(.empty) ~ .floating-label {
   color: #0f9d58;
@@ -4267,6 +4383,9 @@ select[multiple].form-control.focus {
 .form-group-material-indigo input.form-control:not(.empty) ~ .floating-label {
   color: #3f51b5;
 }
+.form-group-material-blue input.form-control:not(.empty) ~ .floating-label {
+  color: #4285f4;
+}
 .form-group-material-lightblue input.form-control:not(.empty) ~ .floating-label {
   color: #03a9f4;
 }
@@ -4478,7 +4597,7 @@ legend {
   float: right;
 }
 .navbar {
-  background-color: #4285f4;
+  background-color: #009587;
   border: 0;
   border-radius: 0;
 }
@@ -4618,10 +4737,10 @@ fieldset[disabled] .navbar .btn-link:focus {
 }
 .navbar,
 .navbar-default {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .navbar-primary {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .navbar-success {
   background-color: #0f9d58;
@@ -4650,6 +4769,9 @@ fieldset[disabled] .navbar .btn-link:focus {
 .navbar-material-indigo {
   background-color: #3f51b5;
 }
+.navbar-material-blue {
+  background-color: #4285f4;
+}
 .navbar-material-lightblue {
   background-color: #03a9f4;
 }
@@ -4749,14 +4871,14 @@ fieldset[disabled] .navbar .btn-link:focus {
 }
 .dropdown-menu li a:hover {
   background-color: transparent;
-  color: #4285f4;
+  color: #009587;
 }
 .dropdown-menu li a:hover,
 .dropdown-menu-default li a:hover {
-  color: #4285f4;
+  color: #009587;
 }
 .dropdown-menu-primary li a:hover {
-  color: #4285f4;
+  color: #009587;
 }
 .dropdown-menu-success li a:hover {
   color: #0f9d58;
@@ -4785,6 +4907,9 @@ fieldset[disabled] .navbar .btn-link:focus {
 .dropdown-menu-material-indigo li a:hover {
   color: #3f51b5;
 }
+.dropdown-menu-material-blue li a:hover {
+  color: #4285f4;
+}
 .dropdown-menu-material-lightblue li a:hover {
   color: #03a9f4;
 }
@@ -4834,7 +4959,7 @@ fieldset[disabled] .navbar .btn-link:focus {
   background-color: #ffffff;
 }
 .alert-primary {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .alert-success {
   background-color: #0f9d58;
@@ -4863,6 +4988,9 @@ fieldset[disabled] .navbar .btn-link:focus {
 .alert-material-indigo {
   background-color: #3f51b5;
 }
+.alert-material-blue {
+  background-color: #4285f4;
+}
 .alert-material-lightblue {
   background-color: #03a9f4;
 }
@@ -4920,10 +5048,10 @@ fieldset[disabled] .navbar .btn-link:focus {
 }
 .progress .progress-bar,
 .progress .progress-bar-default {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .progress .progress-bar-primary {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .progress .progress-bar-success {
   background-color: #0f9d58;
@@ -4952,6 +5080,9 @@ fieldset[disabled] .navbar .btn-link:focus {
 .progress .progress-bar-material-indigo {
   background-color: #3f51b5;
 }
+.progress .progress-bar-material-blue {
+  background-color: #4285f4;
+}
 .progress .progress-bar-material-lightblue {
   background-color: #03a9f4;
 }
@@ -4992,7 +5123,7 @@ fieldset[disabled] .navbar .btn-link:focus {
   color: #ff5722;
 }
 .text-primary {
-  color: #4285f4;
+  color: #009587;
 }
 .text-danger {
   color: #f44336;
@@ -5004,7 +5135,7 @@ fieldset[disabled] .navbar .btn-link:focus {
   color: #03a9f4;
 }
 .nav-tabs {
-  background: #4285f4;
+  background: #009587;
 }
 .nav-tabs > li > a {
   color: #FFFFFF;
@@ -5074,7 +5205,7 @@ icon-default {
 }
 .mdi-primary,
 icon-primary {
-  color: #4285f4;
+  color: #009587;
 }
 .mdi-success,
 icon-success {
@@ -5112,6 +5243,10 @@ icon-material-deeppurple {
 icon-material-indigo {
   color: #3f51b5;
 }
+.mdi-material-blue,
+icon-material-blue {
+  color: #4285f4;
+}
 .mdi-material-lightblue,
 icon-material-lightblue {
   color: #03a9f4;
@@ -5263,7 +5398,7 @@ icon-material-lightgrey {
   background-color: #9e9e9e;
 }
 .label-primary {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .label-success {
   background-color: #0f9d58;
@@ -5292,6 +5427,9 @@ icon-material-lightgrey {
 .label-material-indigo {
   background-color: #3f51b5;
 }
+.label-material-blue {
+  background-color: #4285f4;
+}
 .label-material-lightblue {
   background-color: #03a9f4;
 }
@@ -5338,7 +5476,7 @@ icon-material-lightgrey {
   background-color: #ececec;
 }
 .panel-primary > .panel-heading {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .panel-success > .panel-heading {
   background-color: #0f9d58;
@@ -5367,6 +5505,9 @@ icon-material-lightgrey {
 .panel-material-indigo > .panel-heading {
   background-color: #3f51b5;
 }
+.panel-material-blue > .panel-heading {
+  background-color: #4285f4;
+}
 .panel-material-lightblue > .panel-heading {
   background-color: #03a9f4;
 }
@@ -5413,6 +5554,18 @@ icon-material-lightgrey {
 .panel-footer {
   background-color: #ececec;
 }
+.modal {
+  background: rgba(0, 0, 0, 0.3);
+}
+* {
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  -webkit-tap-highlight-color: transparent;
+}
+*:focus {
+  outline: 0;
+  border: none;
+  color: rgba(0, 0, 0, 0);
+}
 .snackbar {
   background-color: #323232;
   color: rgba(255, 255, 255, 0.84);
@@ -5550,10 +5703,10 @@ icon-material-lightgrey {
 }
 .slider.noUi-connect,
 .slider-default.noUi-connect {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .slider-primary.noUi-connect {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .slider-success.noUi-connect {
   background-color: #0f9d58;
@@ -5582,6 +5735,9 @@ icon-material-lightgrey {
 .slider-material-indigo.noUi-connect {
   background-color: #3f51b5;
 }
+.slider-material-blue.noUi-connect {
+  background-color: #4285f4;
+}
 .slider-material-lightblue.noUi-connect {
   background-color: #03a9f4;
 }
@@ -5620,10 +5776,10 @@ icon-material-lightgrey {
 }
 .slider .noUi-connect,
 .slider-default .noUi-connect {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .slider-primary .noUi-connect {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .slider-success .noUi-connect {
   background-color: #0f9d58;
@@ -5652,6 +5808,9 @@ icon-material-lightgrey {
 .slider-material-indigo .noUi-connect {
   background-color: #3f51b5;
 }
+.slider-material-blue .noUi-connect {
+  background-color: #4285f4;
+}
 .slider-material-lightblue .noUi-connect {
   background-color: #03a9f4;
 }
@@ -5690,10 +5849,10 @@ icon-material-lightgrey {
 }
 .slider .noUi-handle,
 .slider-default .noUi-handle {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .slider-primary .noUi-handle {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .slider-success .noUi-handle {
   background-color: #0f9d58;
@@ -5722,6 +5881,9 @@ icon-material-lightgrey {
 .slider-material-indigo .noUi-handle {
   background-color: #3f51b5;
 }
+.slider-material-blue .noUi-handle {
+  background-color: #4285f4;
+}
 .slider-material-lightblue .noUi-handle {
   background-color: #03a9f4;
 }
@@ -5760,10 +5922,10 @@ icon-material-lightgrey {
 }
 .slider .noUi-handle,
 .slider-default .noUi-handle {
-  border-color: #4285f4;
+  border-color: #009587;
 }
 .slider-primary .noUi-handle {
-  border-color: #4285f4;
+  border-color: #009587;
 }
 .slider-success .noUi-handle {
   border-color: #0f9d58;
@@ -5792,6 +5954,9 @@ icon-material-lightgrey {
 .slider-material-indigo .noUi-handle {
   border-color: #3f51b5;
 }
+.slider-material-blue .noUi-handle {
+  border-color: #4285f4;
+}
 .slider-material-lightblue .noUi-handle {
   border-color: #03a9f4;
 }
@@ -5969,3 +6134,21 @@ icon-material-lightgrey {
 .selectize-control.multi .dropdown-active ~ .selectize-dropdown {
   display: block;
 }
+.dropdownjs:after {
+  right: 5px;
+  top: 3px;
+  font-size: 25px;
+  position: absolute;
+  content: "\e894";
+  font-family: "Material-Design-Icons";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  pointer-events: none;
+  color: #757575;
+}

dist/css/material.css

@@ -2438,7 +2438,7 @@ body .well-primary,
 body .jumbotron-primary,
 .container .jumbotron-primary,
 .container-fluid .jumbotron-primary {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 body .well-success,
 .container .well-success,
@@ -2512,6 +2512,14 @@ body .jumbotron-material-indigo,
 .container-fluid .jumbotron-material-indigo {
   background-color: #3f51b5;
 }
+body .well-material-blue,
+.container .well-material-blue,
+.container-fluid .well-material-blue,
+body .jumbotron-material-blue,
+.container .jumbotron-material-blue,
+.container-fluid .jumbotron-material-blue {
+  background-color: #4285f4;
+}
 body .well-material-lightblue,
 .container .well-material-lightblue,
 .container-fluid .well-material-lightblue,
@@ -2633,7 +2641,7 @@ body .jumbotron-material-lightgrey,
   background-color: transparent;
 }
 .btn-primary:not(.btn-link):not(.btn-flat) {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .btn-success:not(.btn-link):not(.btn-flat) {
   background-color: #0f9d58;
@@ -2662,6 +2670,9 @@ body .jumbotron-material-lightgrey,
 .btn-material-indigo:not(.btn-link):not(.btn-flat) {
   background-color: #3f51b5;
 }
+.btn-material-blue:not(.btn-link):not(.btn-flat) {
+  background-color: #4285f4;
+}
 .btn-material-lightblue:not(.btn-link):not(.btn-flat) {
   background-color: #03a9f4;
 }
@@ -2703,7 +2714,7 @@ body .jumbotron-material-lightgrey,
   color: rgba(0, 0, 0, 0.84);
 }
 .btn-primary.btn-flat:not(.btn-link) {
-  color: #4285f4;
+  color: #009587;
 }
 .btn-success.btn-flat:not(.btn-link) {
   color: #0f9d58;
@@ -2732,6 +2743,9 @@ body .jumbotron-material-lightgrey,
 .btn-material-indigo.btn-flat:not(.btn-link) {
   color: #3f51b5;
 }
+.btn-material-blue.btn-flat:not(.btn-link) {
+  color: #4285f4;
+}
 .btn-material-lightblue.btn-flat:not(.btn-link) {
   color: #03a9f4;
 }
@@ -2803,7 +2817,7 @@ body .jumbotron-material-lightgrey,
 }
 .btn.btn-fab-primary,
 .btn.btn-fab:hover-primary {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .btn.btn-fab-success,
 .btn.btn-fab:hover-success {
@@ -2841,6 +2855,10 @@ body .jumbotron-material-lightgrey,
 .btn.btn-fab:hover-material-indigo {
   background-color: #3f51b5;
 }
+.btn.btn-fab-material-blue,
+.btn.btn-fab:hover-material-blue {
+  background-color: #4285f4;
+}
 .btn.btn-fab-material-lightblue,
 .btn.btn-fab:hover-material-lightblue {
   background-color: #03a9f4;
@@ -2926,7 +2944,7 @@ body .jumbotron-material-lightgrey,
   background-color: transparent;
 }
 .open > .dropdown-toggle.btn-primary {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .open > .dropdown-toggle.btn-success {
   background-color: #0f9d58;
@@ -2955,6 +2973,9 @@ body .jumbotron-material-lightgrey,
 .open > .dropdown-toggle.btn-material-indigo {
   background-color: #3f51b5;
 }
+.open > .dropdown-toggle.btn-material-blue {
+  background-color: #4285f4;
+}
 .open > .dropdown-toggle.btn-material-lightblue {
   background-color: #03a9f4;
 }
@@ -2991,6 +3012,12 @@ body .jumbotron-material-lightgrey,
 .open > .dropdown-toggle.btn-material-lightgrey {
   background-color: #ececec;
 }
+.btn-group .btn + .btn,
+.btn-group .btn + .btn-group,
+.btn-group .btn-group + .btn,
+.btn-group .btn-group + .btn-group {
+  margin-left: 0;
+}
 .btn-group,
 .btn-group-vertical {
   position: relative;
@@ -3027,10 +3054,6 @@ body .jumbotron-material-lightgrey,
   box-shadow: none !important;
   margin: 0;
 }
-.btn-group .btn:active .caret,
-.btn-group-vertical .btn:active .caret {
-  margin-left: -1px;
-}
 .btn-group-flat {
   box-shadow: none !important;
 }
@@ -3157,7 +3180,7 @@ body .jumbotron-material-lightgrey,
   background-color: #0f9d58;
 }
 .checkbox-primary input[type=checkbox]:checked ~ .check:after {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .checkbox-success input[type=checkbox]:checked ~ .check:after {
   background-color: #0f9d58;
@@ -3186,6 +3209,9 @@ body .jumbotron-material-lightgrey,
 .checkbox-material-indigo input[type=checkbox]:checked ~ .check:after {
   background-color: #3f51b5;
 }
+.checkbox-material-blue input[type=checkbox]:checked ~ .check:after {
+  background-color: #4285f4;
+}
 .checkbox-material-lightblue input[type=checkbox]:checked ~ .check:after {
   background-color: #03a9f4;
 }
@@ -3227,7 +3253,7 @@ body .jumbotron-material-lightgrey,
   color: #4caf50;
 }
 .checkbox-primary input[type=checkbox]:checked ~ .check:before {
-  color: #4285f4;
+  color: #009587;
 }
 .checkbox-success input[type=checkbox]:checked ~ .check:before {
   color: #0f9d58;
@@ -3256,6 +3282,9 @@ body .jumbotron-material-lightgrey,
 .checkbox-material-indigo input[type=checkbox]:checked ~ .check:before {
   color: #3f51b5;
 }
+.checkbox-material-blue input[type=checkbox]:checked ~ .check:before {
+  color: #4285f4;
+}
 .checkbox-material-lightblue input[type=checkbox]:checked ~ .check:before {
   color: #03a9f4;
 }
@@ -3297,7 +3326,7 @@ body .jumbotron-material-lightgrey,
   color: #4caf50;
 }
 .checkbox-primary input[type=checkbox]:checked ~ .check {
-  color: #4285f4;
+  color: #009587;
 }
 .checkbox-success input[type=checkbox]:checked ~ .check {
   color: #0f9d58;
@@ -3326,6 +3355,9 @@ body .jumbotron-material-lightgrey,
 .checkbox-material-indigo input[type=checkbox]:checked ~ .check {
   color: #3f51b5;
 }
+.checkbox-material-blue input[type=checkbox]:checked ~ .check {
+  color: #4285f4;
+}
 .checkbox-material-lightblue input[type=checkbox]:checked ~ .check {
   color: #03a9f4;
 }
@@ -3522,6 +3554,72 @@ body .jumbotron-material-lightgrey,
     opacity: 0;
   }
 }
+.togglebutton {
+  vertical-align: middle;
+}
+.togglebutton,
+.togglebutton * {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.togglebutton label {
+  font-weight: 400;
+  cursor: pointer;
+}
+.togglebutton label input[type=checkbox]:first-child {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.togglebutton label input[type=checkbox]:first-child:checked + .toggle {
+  background-color: rgba(0, 149, 135, 0.5);
+}
+.togglebutton label input[type=checkbox]:first-child:checked + .toggle:after {
+  background-color: #009587;
+}
+.togglebutton label .toggle,
+.togglebutton label input[type=checkbox][disabled]:first-child + .toggle {
+  content: "";
+  display: inline-block;
+  width: 30px;
+  height: 15px;
+  background-color: rgba(80, 80, 80, 0.7);
+  border-radius: 15px;
+  margin-right: 10px;
+  -webkit-transition: background 0.3s ease;
+          transition: background 0.3s ease;
+  vertical-align: middle;
+}
+.togglebutton label .toggle:after {
+  content: "";
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background-color: #F1F1F1;
+  border-radius: 20px;
+  position: relative;
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
+  left: -5px;
+  top: -2px;
+  -webkit-transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
+          transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
+}
+.togglebutton label input[type=checkbox][disabled]:first-child + .toggle:after,
+.togglebutton label input[type=checkbox][disabled]:checked:first-child + .toggle:after {
+  background-color: #BDBDBD;
+}
+.togglebutton label input[type=checkbox]:first-child:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 149, 135, 0.1);
+}
+.togglebutton label input[type=checkbox]:first-child ~ .toggle:active:after,
+.togglebutton label input[type=checkbox][disabled]:first-child ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
+}
+.togglebutton label input[type=checkbox]:first-child:checked + .toggle:after {
+  left: 15px;
+}
 .form-horizontal .radio {
   margin-bottom: 10px;
 }
@@ -3583,7 +3681,7 @@ body .jumbotron-material-lightgrey,
   background-color: rgba(0, 0, 0, 0.84);
 }
 .radio-primary input[type=radio]:checked ~ .check {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .radio-success input[type=radio]:checked ~ .check {
   background-color: #0f9d58;
@@ -3612,6 +3710,9 @@ body .jumbotron-material-lightgrey,
 .radio-material-indigo input[type=radio]:checked ~ .check {
   background-color: #3f51b5;
 }
+.radio-material-blue input[type=radio]:checked ~ .check {
+  background-color: #4285f4;
+}
 .radio-material-lightblue input[type=radio]:checked ~ .check {
   background-color: #03a9f4;
 }
@@ -3653,7 +3754,7 @@ body .jumbotron-material-lightgrey,
   border-color: rgba(0, 0, 0, 0.84);
 }
 .radio-primary input[type=radio]:checked ~ .circle {
-  border-color: #4285f4;
+  border-color: #009587;
 }
 .radio-success input[type=radio]:checked ~ .circle {
   border-color: #0f9d58;
@@ -3682,6 +3783,9 @@ body .jumbotron-material-lightgrey,
 .radio-material-indigo input[type=radio]:checked ~ .circle {
   border-color: #3f51b5;
 }
+.radio-material-blue input[type=radio]:checked ~ .circle {
+  border-color: #4285f4;
+}
 .radio-material-lightblue input[type=radio]:checked ~ .circle {
   border-color: #03a9f4;
 }
@@ -3834,7 +3938,7 @@ select[multiple].form-control.focus {
 }
 .form-control-wrapper .form-control:focus ~ .material-input:after,
 .form-control-wrapper .form-control.focus ~ .material-input:after {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .form-control-wrapper .form-control:focus:invalid ~ .material-input:before,
 .form-control-wrapper .form-control.focus:invalid ~ .material-input:before,
@@ -3851,7 +3955,7 @@ select[multiple].form-control.focus {
   width: 100%;
   left: 0;
   height: 2px;
-  background-color: #4285f4;
+  background-color: #009587;
   bottom: -1px;
   -webkit-transform: scaleX(0);
       -ms-transform: scaleX(0);
@@ -3948,10 +4052,10 @@ select[multiple].form-control.focus {
 }
 .form-group .material-input:before,
 .form-group-default .material-input:before {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .form-group-primary .material-input:before {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .form-group-success .material-input:before {
   background-color: #0f9d58;
@@ -3980,6 +4084,9 @@ select[multiple].form-control.focus {
 .form-group-material-indigo .material-input:before {
   background-color: #3f51b5;
 }
+.form-group-material-blue .material-input:before {
+  background-color: #4285f4;
+}
 .form-group-material-lightblue .material-input:before {
   background-color: #03a9f4;
 }
@@ -4018,10 +4125,10 @@ select[multiple].form-control.focus {
 }
 .form-group input.form-control:focus ~ .material-input:after,
 .form-group-default input.form-control:focus ~ .material-input:after {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .form-group-primary input.form-control:focus ~ .material-input:after {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .form-group-success input.form-control:focus ~ .material-input:after {
   background-color: #0f9d58;
@@ -4050,6 +4157,9 @@ select[multiple].form-control.focus {
 .form-group-material-indigo input.form-control:focus ~ .material-input:after {
   background-color: #3f51b5;
 }
+.form-group-material-blue input.form-control:focus ~ .material-input:after {
+  background-color: #4285f4;
+}
 .form-group-material-lightblue input.form-control:focus ~ .material-input:after {
   background-color: #03a9f4;
 }
@@ -4088,10 +4198,10 @@ select[multiple].form-control.focus {
 }
 .form-group input.form-control.focus ~ .material-input:after,
 .form-group-default input.form-control.focus ~ .material-input:after {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .form-group-primary input.form-control.focus ~ .material-input:after {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .form-group-success input.form-control.focus ~ .material-input:after {
   background-color: #0f9d58;
@@ -4120,6 +4230,9 @@ select[multiple].form-control.focus {
 .form-group-material-indigo input.form-control.focus ~ .material-input:after {
   background-color: #3f51b5;
 }
+.form-group-material-blue input.form-control.focus ~ .material-input:after {
+  background-color: #4285f4;
+}
 .form-group-material-lightblue input.form-control.focus ~ .material-input:after {
   background-color: #03a9f4;
 }
@@ -4161,7 +4274,7 @@ select[multiple].form-control.focus {
   color: rgba(0, 0, 0, 0.84);
 }
 .form-group-primary .control-label {
-  color: #4285f4;
+  color: #009587;
 }
 .form-group-success .control-label {
   color: #0f9d58;
@@ -4190,6 +4303,9 @@ select[multiple].form-control.focus {
 .form-group-material-indigo .control-label {
   color: #3f51b5;
 }
+.form-group-material-blue .control-label {
+  color: #4285f4;
+}
 .form-group-material-lightblue .control-label {
   color: #03a9f4;
 }
@@ -4228,10 +4344,10 @@ select[multiple].form-control.focus {
 }
 .form-group input.form-control:not(.empty) ~ .floating-label,
 .form-group-default input.form-control:not(.empty) ~ .floating-label {
-  color: #4285f4;
+  color: #009587;
 }
 .form-group-primary input.form-control:not(.empty) ~ .floating-label {
-  color: #4285f4;
+  color: #009587;
 }
 .form-group-success input.form-control:not(.empty) ~ .floating-label {
   color: #0f9d58;
@@ -4260,6 +4376,9 @@ select[multiple].form-control.focus {
 .form-group-material-indigo input.form-control:not(.empty) ~ .floating-label {
   color: #3f51b5;
 }
+.form-group-material-blue input.form-control:not(.empty) ~ .floating-label {
+  color: #4285f4;
+}
 .form-group-material-lightblue input.form-control:not(.empty) ~ .floating-label {
   color: #03a9f4;
 }
@@ -4471,7 +4590,7 @@ legend {
   float: right;
 }
 .navbar {
-  background-color: #4285f4;
+  background-color: #009587;
   border: 0;
   border-radius: 0;
 }
@@ -4611,10 +4730,10 @@ fieldset[disabled] .navbar .btn-link:focus {
 }
 .navbar,
 .navbar-default {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .navbar-primary {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .navbar-success {
   background-color: #0f9d58;
@@ -4643,6 +4762,9 @@ fieldset[disabled] .navbar .btn-link:focus {
 .navbar-material-indigo {
   background-color: #3f51b5;
 }
+.navbar-material-blue {
+  background-color: #4285f4;
+}
 .navbar-material-lightblue {
   background-color: #03a9f4;
 }
@@ -4742,14 +4864,14 @@ fieldset[disabled] .navbar .btn-link:focus {
 }
 .dropdown-menu li a:hover {
   background-color: transparent;
-  color: #4285f4;
+  color: #009587;
 }
 .dropdown-menu li a:hover,
 .dropdown-menu-default li a:hover {
-  color: #4285f4;
+  color: #009587;
 }
 .dropdown-menu-primary li a:hover {
-  color: #4285f4;
+  color: #009587;
 }
 .dropdown-menu-success li a:hover {
   color: #0f9d58;
@@ -4778,6 +4900,9 @@ fieldset[disabled] .navbar .btn-link:focus {
 .dropdown-menu-material-indigo li a:hover {
   color: #3f51b5;
 }
+.dropdown-menu-material-blue li a:hover {
+  color: #4285f4;
+}
 .dropdown-menu-material-lightblue li a:hover {
   color: #03a9f4;
 }
@@ -4827,7 +4952,7 @@ fieldset[disabled] .navbar .btn-link:focus {
   background-color: #ffffff;
 }
 .alert-primary {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .alert-success {
   background-color: #0f9d58;
@@ -4856,6 +4981,9 @@ fieldset[disabled] .navbar .btn-link:focus {
 .alert-material-indigo {
   background-color: #3f51b5;
 }
+.alert-material-blue {
+  background-color: #4285f4;
+}
 .alert-material-lightblue {
   background-color: #03a9f4;
 }
@@ -4913,10 +5041,10 @@ fieldset[disabled] .navbar .btn-link:focus {
 }
 .progress .progress-bar,
 .progress .progress-bar-default {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .progress .progress-bar-primary {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .progress .progress-bar-success {
   background-color: #0f9d58;
@@ -4945,6 +5073,9 @@ fieldset[disabled] .navbar .btn-link:focus {
 .progress .progress-bar-material-indigo {
   background-color: #3f51b5;
 }
+.progress .progress-bar-material-blue {
+  background-color: #4285f4;
+}
 .progress .progress-bar-material-lightblue {
   background-color: #03a9f4;
 }
@@ -4985,7 +5116,7 @@ fieldset[disabled] .navbar .btn-link:focus {
   color: #ff5722;
 }
 .text-primary {
-  color: #4285f4;
+  color: #009587;
 }
 .text-danger {
   color: #f44336;
@@ -4997,7 +5128,7 @@ fieldset[disabled] .navbar .btn-link:focus {
   color: #03a9f4;
 }
 .nav-tabs {
-  background: #4285f4;
+  background: #009587;
 }
 .nav-tabs > li > a {
   color: #FFFFFF;
@@ -5067,7 +5198,7 @@ icon-default {
 }
 .mdi-primary,
 icon-primary {
-  color: #4285f4;
+  color: #009587;
 }
 .mdi-success,
 icon-success {
@@ -5105,6 +5236,10 @@ icon-material-deeppurple {
 icon-material-indigo {
   color: #3f51b5;
 }
+.mdi-material-blue,
+icon-material-blue {
+  color: #4285f4;
+}
 .mdi-material-lightblue,
 icon-material-lightblue {
   color: #03a9f4;
@@ -5256,7 +5391,7 @@ icon-material-lightgrey {
   background-color: #9e9e9e;
 }
 .label-primary {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .label-success {
   background-color: #0f9d58;
@@ -5285,6 +5420,9 @@ icon-material-lightgrey {
 .label-material-indigo {
   background-color: #3f51b5;
 }
+.label-material-blue {
+  background-color: #4285f4;
+}
 .label-material-lightblue {
   background-color: #03a9f4;
 }
@@ -5331,7 +5469,7 @@ icon-material-lightgrey {
   background-color: #ececec;
 }
 .panel-primary > .panel-heading {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .panel-success > .panel-heading {
   background-color: #0f9d58;
@@ -5360,6 +5498,9 @@ icon-material-lightgrey {
 .panel-material-indigo > .panel-heading {
   background-color: #3f51b5;
 }
+.panel-material-blue > .panel-heading {
+  background-color: #4285f4;
+}
 .panel-material-lightblue > .panel-heading {
   background-color: #03a9f4;
 }
@@ -5406,6 +5547,18 @@ icon-material-lightgrey {
 .panel-footer {
   background-color: #ececec;
 }
+.modal {
+  background: rgba(0, 0, 0, 0.3);
+}
+* {
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  -webkit-tap-highlight-color: transparent;
+}
+*:focus {
+  outline: 0;
+  border: none;
+  color: rgba(0, 0, 0, 0);
+}
 .snackbar {
   background-color: #323232;
   color: rgba(255, 255, 255, 0.84);
@@ -5543,10 +5696,10 @@ icon-material-lightgrey {
 }
 .slider.noUi-connect,
 .slider-default.noUi-connect {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .slider-primary.noUi-connect {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .slider-success.noUi-connect {
   background-color: #0f9d58;
@@ -5575,6 +5728,9 @@ icon-material-lightgrey {
 .slider-material-indigo.noUi-connect {
   background-color: #3f51b5;
 }
+.slider-material-blue.noUi-connect {
+  background-color: #4285f4;
+}
 .slider-material-lightblue.noUi-connect {
   background-color: #03a9f4;
 }
@@ -5613,10 +5769,10 @@ icon-material-lightgrey {
 }
 .slider .noUi-connect,
 .slider-default .noUi-connect {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .slider-primary .noUi-connect {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .slider-success .noUi-connect {
   background-color: #0f9d58;
@@ -5645,6 +5801,9 @@ icon-material-lightgrey {
 .slider-material-indigo .noUi-connect {
   background-color: #3f51b5;
 }
+.slider-material-blue .noUi-connect {
+  background-color: #4285f4;
+}
 .slider-material-lightblue .noUi-connect {
   background-color: #03a9f4;
 }
@@ -5683,10 +5842,10 @@ icon-material-lightgrey {
 }
 .slider .noUi-handle,
 .slider-default .noUi-handle {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .slider-primary .noUi-handle {
-  background-color: #4285f4;
+  background-color: #009587;
 }
 .slider-success .noUi-handle {
   background-color: #0f9d58;
@@ -5715,6 +5874,9 @@ icon-material-lightgrey {
 .slider-material-indigo .noUi-handle {
   background-color: #3f51b5;
 }
+.slider-material-blue .noUi-handle {
+  background-color: #4285f4;
+}
 .slider-material-lightblue .noUi-handle {
   background-color: #03a9f4;
 }
@@ -5753,10 +5915,10 @@ icon-material-lightgrey {
 }
 .slider .noUi-handle,
 .slider-default .noUi-handle {
-  border-color: #4285f4;
+  border-color: #009587;
 }
 .slider-primary .noUi-handle {
-  border-color: #4285f4;
+  border-color: #009587;
 }
 .slider-success .noUi-handle {
   border-color: #0f9d58;
@@ -5785,6 +5947,9 @@ icon-material-lightgrey {
 .slider-material-indigo .noUi-handle {
   border-color: #3f51b5;
 }
+.slider-material-blue .noUi-handle {
+  border-color: #4285f4;
+}
 .slider-material-lightblue .noUi-handle {
   border-color: #03a9f4;
 }
@@ -5962,3 +6127,21 @@ icon-material-lightgrey {
 .selectize-control.multi .dropdown-active ~ .selectize-dropdown {
   display: block;
 }
+.dropdownjs:after {
+  right: 5px;
+  top: 3px;
+  font-size: 25px;
+  position: absolute;
+  content: "\e894";
+  font-family: "Material-Design-Icons";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  pointer-events: none;
+  color: #757575;
+}

dist/css/ripples.css

@@ -9,7 +9,8 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
-  border-radius: 2px;
+  border-radius: inherit;
+  pointer-events: none;
 }
 .ripple {
   position: absolute;
@@ -31,7 +32,7 @@
 .ripple.ripple-on {
   -webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
           transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
-  opacity: 1;
+  opacity: 0.15;
 }
 .ripple.ripple-out {
   -webkit-transition: opacity 0.1s linear 0s !important;

dist/css/ripples.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/less/ripples.less"],"names":[],"mappings":"AAAA;EACI,kBAAA;;AAEJ;EACI,kBAAA;EACA,MAAA;EACA,OAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,sBAAA;EACA,oBAAA;;AAEJ;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,mBAAA;EACA,qCAAA;EACA,WAAW,QAAX;EACA,qBAAA;EACA,UAAA;EACA,oBAAA;;AAEJ,OAAO;EACH,qDAAqD,iCAArD;EACA,aAAA;;AAEJ,OAAO;EACH,6CAAA;EACA,UAAA"}

dist/css/ripples.min.css

@@ -1 +1 @@
-.withripple{position:relative}.ripple-wrapper{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;overflow:hidden;border-radius:2px}.ripple{position:absolute;width:20px;height:20px;margin-left:-10px;margin-top:-10px;border-radius:100%;background-color:rgba(0,0,0,.05);-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;opacity:0;pointer-events:none}.ripple.ripple-on{-webkit-transition:opacity .15s ease-in 0s,-webkit-transform .5s cubic-bezier(0.4,0,.2,1) .1s;transition:opacity .15s ease-in 0s,transform .5s cubic-bezier(0.4,0,.2,1) .1s;opacity:1}.ripple.ripple-out{-webkit-transition:opacity .1s linear 0s!important;transition:opacity .1s linear 0s!important;opacity:0}
+.withripple{position:relative}.ripple-wrapper{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;overflow:hidden;border-radius:inherit}.ripple{position:absolute;width:20px;height:20px;margin-left:-10px;margin-top:-10px;border-radius:100%;background-color:rgba(0,0,0,.05);-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;opacity:0;pointer-events:none}.ripple.ripple-on{-webkit-transition:opacity .15s ease-in 0s,-webkit-transform .5s cubic-bezier(0.4,0,.2,1) .1s;transition:opacity .15s ease-in 0s,transform .5s cubic-bezier(0.4,0,.2,1) .1s;opacity:.15}.ripple.ripple-out{-webkit-transition:opacity .1s linear 0s!important;transition:opacity .1s linear 0s!important;opacity:0}

dist/js/material.js

@@ -1,159 +1,179 @@
-/* globals jQuery, ripples */
+/* globals jQuery */
 
 (function($) {
-    // Selector to select only not already processed elements
+  // Selector to select only not already processed elements
-    $.expr[":"].notmdproc = function(obj){
+  $.expr[":"].notmdproc = function(obj){
-        if ($(obj).data("mdproc")) {
+    if ($(obj).data("mdproc")) {
-            return false;
+      return false;
-        } else {
+    } else {
-            return true;
+      return true;
-        }
-    };
-
-    function _isChar(evt) {
-        if (typeof evt.which == "undefined") {
-            return true;
-        } else if (typeof evt.which == "number" && evt.which > 0) {
-            return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8;
-        }
-        return false;
     }
+  };
 
-    $.material =  {
+  function _isChar(evt) {
-        "options": {
+    if (typeof evt.which == "undefined") {
-            "withRipples": [
+      return true;
-                ".btn:not(.btn-link)",
+    } else if (typeof evt.which == "number" && evt.which > 0) {
-                ".card-image",
+      return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8;
-                ".navbar a:not(.withoutripple)",
+    }
-                ".dropdown-menu a",
+    return false;
-                ".nav-tabs a:not(.withoutripple)",
+  }
-                ".withripple"
-            ].join(","),
-            "inputElements": "input.form-control, textarea.form-control, select.form-control",
-            "checkboxElements": ".checkbox > label > input[type=checkbox]",
-            "radioElements": ".radio > label > input[type=radio]"
-        },
-        "checkbox": function(selector) {
-            // Add fake-checkbox to material checkboxes
-            $((selector) ? selector : this.options.checkboxElements)
-            .filter(":notmdproc")
-            .data("mdproc", true)
-            .after("<span class=ripple></span><span class=check></span>");
-        },
-        "radio": function(selector) {
-            // Add fake-radio to material radios
-            $((selector) ? selector : this.options.radioElements)
-            .filter(":notmdproc")
-            .data("mdproc", true)
-            .after("<span class=circle></span><span class=check></span>");
-        },
-        "input": function(selector) {
-            $((selector) ? selector : this.options.inputElements)
-            .filter(":notmdproc")
-            .data("mdproc", true)
-            .each( function() {
-                var $this = $(this);
-                $this.wrap("<div class=form-control-wrapper></div>");
-                $this.after("<span class=material-input></span>");
-                if ($this.hasClass("floating-label")) {
-                    var placeholder = $this.attr("placeholder");
-                    $this.attr("placeholder", null).removeClass("floating-label");
-                    $this.after("<div class=floating-label>" + placeholder + "</div>");
-                }
-                if ($this.val() === null || $this.val() == "undefined" || $this.val() === "") {
-                    $this.addClass("empty");
-                }
-                if ($this.parent().next().is("[type=file]")) {
-                    $this.parent().addClass("fileinput");
-                    var $input = $this.parent().next().detach();
-                    $this.after($input);
-                }
-            });
 
-            $(document)
+  $.material =  {
-            .on("change", ".checkbox input", function() { $(this).blur(); })
+    "options": {
-            .on("keydown paste", ".form-control", function(e) {
+      "withRipples": [
-                if(_isChar(e)) {
+        ".btn:not(.btn-link)",
-                    $(this).removeClass("empty");
+        ".card-image",
-                }
+        ".navbar a:not(.withoutripple)",
-            })
+        ".dropdown-menu a",
-            .on("keyup change", ".form-control", function() {
+        ".nav-tabs a:not(.withoutripple)",
-                var $this = $(this);
+        ".withripple"
-                if($this.val() === "") {
+      ].join(","),
-                    $this.addClass("empty");
+      "inputElements": "input.form-control, textarea.form-control, select.form-control",
-                } else {
+      "checkboxElements": ".checkbox > label > input[type=checkbox]",
-                    $this.removeClass("empty");
+      "togglebuttonElements": ".togglebutton > label > input[type=checkbox]",
-                }
+      "radioElements": ".radio > label > input[type=radio]"
-            })
+    },
-            .on("focus", ".form-control-wrapper.fileinput", function() {
+    "checkbox": function(selector) {
-                $(this).find("input").addClass("focus");
+      // Add fake-checkbox to material checkboxes
-            })
+      $((selector) ? selector : this.options.checkboxElements)
-            .on("blur", ".form-control-wrapper.fileinput", function() {
+      .filter(":notmdproc")
-                $(this).find("input").removeClass("focus");
+      .data("mdproc", true)
-            })
+      .after("<span class=ripple></span><span class=check></span>");
-            .on("change", ".form-control-wrapper.fileinput [type=file]", function() {
+    },
-                var value = "";
+    "togglebutton": function(selector) {
-                $.each($(this)[0].files, function(i, file) {
+      // Add fake-checkbox to material checkboxes
-                    console.log(file);
+      $((selector) ? selector : this.options.togglebuttonElements)
-                    value += file.name + ", ";
+      .filter(":notmdproc")
-                });
+      .data("mdproc", true)
-                value = value.substring(0, value.length - 2);
+      .after("<span class=toggle></span>");
-                if (value) {
+    },
-                    $(this).prev().removeClass("empty");
+    "radio": function(selector) {
-                } else {
+      // Add fake-radio to material radios
-                    $(this).prev().addClass("empty");
+      $((selector) ? selector : this.options.radioElements)
-                }
+      .filter(":notmdproc")
-                $(this).prev().val(value);
+      .data("mdproc", true)
-            });
+      .after("<span class=circle></span><span class=check></span>");
-        },
+    },
-        "ripples": function(selector) {
+    "input": function(selector) {
-            ripples.init((selector) ? selector : this.options.withRipples);
+      $((selector) ? selector : this.options.inputElements)
-        },
+      .filter(":notmdproc")
-        "init": function() {
+      .data("mdproc", true)
-            this.ripples();
+      .each( function() {
-            this.input();
+        var $this = $(this);
-            this.checkbox();
+        $this.wrap("<div class=form-control-wrapper></div>");
-            this.radio();
+        $this.after("<span class=material-input></span>");
 
-            if (document.arrive) {
+        // Add floating label if required
-                document.arrive("input, textarea, select", function() {
+        if ($this.hasClass("floating-label")) {
-                    $.material.init();
+          var placeholder = $this.attr("placeholder");
-                });
+          $this.attr("placeholder", null).removeClass("floating-label");
-            }
+          $this.after("<div class=floating-label>" + placeholder + "</div>");
-
-            // Detect autofill
-            (function() {
-                // This part of code will detect autofill when the page is loading (username and password inputs for example)
-                var loading = setInterval(function() {
-                    $("input").each(function() {
-                        if ($(this).val() !== $(this).attr("value")) {
-                            $(this).trigger("change");
-                        }
-                    });
-                }, 100);
-                // After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
-                setTimeout(function() {
-                    clearInterval(loading);
-                }, 10000);
-                // Now we just listen on inputs of the focused form (because user can select from the autofill dropdown only when the input has focus)
-                var focused;
-                $(document)
-                .on("focus", "input", function() {
-                    var $inputs = $(this).parents("form").find("input");
-                    focused = setInterval(function() {
-                        $inputs.each(function() {
-                            if ($(this).val() !== $(this).attr("value")) {
-                                $(this).trigger("change");
-                            }
-                        });
-                    }, 100);
-                })
-                .on("blur", "input", function() {
-                    clearInterval(focused);
-                });
-
-            })();
         }
-    };
+
+        // Add hint label if required
+        if ($this.attr("data-hint")) {
+          $this.after("<div class=hint>" + $this.attr("data-hint") + "</div>");
+        }
+
+        // Set as empty if is empty (damn I must improve this...)
+        if ($this.val() === null || $this.val() == "undefined" || $this.val() === "") {
+          $this.addClass("empty");
+        }
+
+        // Support for file input
+        if ($this.parent().next().is("[type=file]")) {
+          $this.parent().addClass("fileinput");
+          var $input = $this.parent().next().detach();
+          $this.after($input);
+        }
+      });
+
+      $(document)
+      .on("change", ".checkbox input[type=checkbox]", function() { $(this).blur(); })
+      .on("keydown paste", ".form-control", function(e) {
+        if(_isChar(e)) {
+          $(this).removeClass("empty");
+        }
+      })
+      .on("keyup change", ".form-control", function() {
+        var $this = $(this);
+        if($this.val() === "") {
+          $this.addClass("empty");
+        } else {
+          $this.removeClass("empty");
+        }
+      })
+      .on("focus", ".form-control-wrapper.fileinput", function() {
+        $(this).find("input").addClass("focus");
+      })
+      .on("blur", ".form-control-wrapper.fileinput", function() {
+        $(this).find("input").removeClass("focus");
+      })
+      .on("change", ".form-control-wrapper.fileinput [type=file]", function() {
+        var value = "";
+        $.each($(this)[0].files, function(i, file) {
+          console.log(file);
+          value += file.name + ", ";
+        });
+        value = value.substring(0, value.length - 2);
+        if (value) {
+          $(this).prev().removeClass("empty");
+        } else {
+          $(this).prev().addClass("empty");
+        }
+        $(this).prev().val(value);
+      });
+    },
+    "ripples": function(selector) {
+      $.ripples({"target": (selector) ? selector : this.options.withRipples});
+    },
+    "init": function() {
+      this.ripples();
+      this.input();
+      this.checkbox();
+      this.togglebutton();
+      this.radio();
+
+      if (document.arrive) {
+        document.arrive("input, textarea, select", function() {
+          $.material.init();
+        });
+      }
+
+      // Detect autofill
+      (function() {
+        // This part of code will detect autofill when the page is loading (username and password inputs for example)
+        var loading = setInterval(function() {
+          $("input[type!=checkbox]").each(function() {
+            if ($(this).val() && $(this).val() !== $(this).attr("value")) {
+              $(this).trigger("change");
+            }
+          });
+        }, 100);
+        // After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
+        setTimeout(function() {
+          clearInterval(loading);
+        }, 10000);
+        // Now we just listen on inputs of the focused form (because user can select from the autofill dropdown only when the input has focus)
+        var focused;
+        $(document)
+        .on("focus", "input", function() {
+          var $inputs = $(this).parents("form").find("input");
+          focused = setInterval(function() {
+            $inputs.each(function() {
+              if ($(this).val() !== $(this).attr("value")) {
+                $(this).trigger("change");
+              }
+            });
+          }, 100);
+        })
+        .on("blur", "input", function() {
+          clearInterval(focused);
+        });
+
+      })();
+    }
+  };
 
 })(jQuery);

dist/js/material.min.js

@@ -1 +1,2 @@
-!function(a){function b(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which:!1}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{withRipples:[".btn:not(.btn-link)",".card-image",".navbar a:not(.withoutripple)",".dropdown-menu a",".nav-tabs a:not(.withoutripple)",".withripple"].join(","),inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > label > input[type=checkbox]",radioElements:".radio > label > input[type=radio]"},checkbox:function(b){a(b?b:this.options.checkboxElements).filter(":notmdproc").data("mdproc",!0).after("<span class=ripple></span><span class=check></span>")},radio:function(b){a(b?b:this.options.radioElements).filter(":notmdproc").data("mdproc",!0).after("<span class=circle></span><span class=check></span>")},input:function(c){a(c?c:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var b=a(this);if(b.wrap("<div class=form-control-wrapper></div>"),b.after("<span class=material-input></span>"),b.hasClass("floating-label")){var c=b.attr("placeholder");b.attr("placeholder",null).removeClass("floating-label"),b.after("<div class=floating-label>"+c+"</div>")}if(b.attr("data-hint")&&b.after("<div class=hint>"+b.attr("data-hint")+"</div>"),(null===b.val()||"undefined"==b.val()||""===b.val())&&b.addClass("empty"),b.parent().next().is("[type=file]")){b.parent().addClass("fileinput");var d=b.parent().next().detach();b.after(d)}}),a(document).on("change",".checkbox input[type=checkbox]",function(){a(this).blur()}).on("keydown paste",".form-control",function(c){b(c)&&a(this).removeClass("empty")}).on("keyup change",".form-control",function(){var b=a(this);""===b.val()?b.addClass("empty"):b.removeClass("empty")}).on("focus",".form-control-wrapper.fileinput",function(){a(this).find("input").addClass("focus")}).on("blur",".form-control-wrapper.fileinput",function(){a(this).find("input").removeClass("focus")}).on("change",".form-control-wrapper.fileinput [type=file]",function(){var b="";a.each(a(this)[0].files,function(a,c){console.log(c),b+=c.name+", "}),b=b.substring(0,b.length-2),b?a(this).prev().removeClass("empty"):a(this).prev().addClass("empty"),a(this).prev().val(b)})},ripples:function(a){ripples.init(a?a:this.options.withRipples)},init:function(){this.ripples(),this.input(),this.checkbox(),this.radio(),document.arrive&&document.arrive("input, textarea, select",function(){a.material.init()}),function(){var b=setInterval(function(){a("input[type!=checkbox]").each(function(){a(this).val()&&a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100);setTimeout(function(){clearInterval(b)},1e4);var c;a(document).on("focus","input",function(){var b=a(this).parents("form").find("input");c=setInterval(function(){b.each(function(){a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100)}).on("blur","input",function(){clearInterval(c)})}()}}}(jQuery);
+!function(a){function b(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which:!1}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{withRipples:[".btn:not(.btn-link)",".card-image",".navbar a:not(.withoutripple)",".dropdown-menu a",".nav-tabs a:not(.withoutripple)",".withripple"].join(","),inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > label > input[type=checkbox]",togglebuttonElements:".togglebutton > label > input[type=checkbox]",radioElements:".radio > label > input[type=radio]"},checkbox:function(b){a(b?b:this.options.checkboxElements).filter(":notmdproc").data("mdproc",!0).after("<span class=ripple></span><span class=check></span>")},togglebutton:function(b){a(b?b:this.options.togglebuttonElements).filter(":notmdproc").data("mdproc",!0).after("<span class=toggle></span>")},radio:function(b){a(b?b:this.options.radioElements).filter(":notmdproc").data("mdproc",!0).after("<span class=circle></span><span class=check></span>")},input:function(c){a(c?c:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var b=a(this);if(b.wrap("<div class=form-control-wrapper></div>"),b.after("<span class=material-input></span>"),b.hasClass("floating-label")){var c=b.attr("placeholder");b.attr("placeholder",null).removeClass("floating-label"),b.after("<div class=floating-label>"+c+"</div>")}if(b.attr("data-hint")&&b.after("<div class=hint>"+b.attr("data-hint")+"</div>"),(null===b.val()||"undefined"==b.val()||""===b.val())&&b.addClass("empty"),b.parent().next().is("[type=file]")){b.parent().addClass("fileinput");var d=b.parent().next().detach();b.after(d)}}),a(document).on("change",".checkbox input[type=checkbox]",function(){a(this).blur()}).on("keydown paste",".form-control",function(c){b(c)&&a(this).removeClass("empty")}).on("keyup change",".form-control",function(){var b=a(this);""===b.val()?b.addClass("empty"):b.removeClass("empty")}).on("focus",".form-control-wrapper.fileinput",function(){a(this).find("input").addClass("focus")}).on("blur",".form-control-wrapper.fileinput",function(){a(this).find("input").removeClass("focus")}).on("change",".form-control-wrapper.fileinput [type=file]",function(){var b="";a.each(a(this)[0].files,function(a,c){console.log(c),b+=c.name+", "}),b=b.substring(0,b.length-2),b?a(this).prev().removeClass("empty"):a(this).prev().addClass("empty"),a(this).prev().val(b)})},ripples:function(b){a.ripples({target:b?b:this.options.withRipples})},init:function(){this.ripples(),this.input(),this.checkbox(),this.togglebutton(),this.radio(),document.arrive&&document.arrive("input, textarea, select",function(){a.material.init()}),function(){var b=setInterval(function(){a("input[type!=checkbox]").each(function(){a(this).val()&&a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100);setTimeout(function(){clearInterval(b)},1e4);var c;a(document).on("focus","input",function(){var b=a(this).parents("form").find("input");c=setInterval(function(){b.each(function(){a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100)}).on("blur","input",function(){clearInterval(c)})}()}}}(jQuery);
+//# sourceMappingURL=material.min.js.map

dist/js/material.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"material.min.js","sources":["material.js"],"names":["$","_isChar","evt","which","ctrlKey","metaKey","altKey","expr","notmdproc","obj","data","material","options","withRipples","join","inputElements","checkboxElements","togglebuttonElements","radioElements","checkbox","selector","this","filter","after","togglebutton","radio","input","each","$this","wrap","hasClass","placeholder","attr","removeClass","val","addClass","parent","next","is","$input","detach","document","on","blur","e","find","value","files","i","file","console","log","name","substring","length","prev","ripples","target","init","arrive","loading","setInterval","trigger","setTimeout","clearInterval","focused","$inputs","parents","jQuery"],"mappings":"CAEA,SAAUA,GAUR,QAASC,GAAQC,GACf,MAAwB,mBAAbA,GAAIC,OACN,EACsB,gBAAbD,GAAIC,OAAqBD,EAAIC,MAAQ,GAC7CD,EAAIE,UAAYF,EAAIG,UAAYH,EAAII,QAAuB,GAAbJ,EAAIC,OAErD,EAdTH,EAAEO,KAAK,KAAKC,UAAY,SAASC,GAC/B,MAAIT,GAAES,GAAKC,KAAK,WACP,GAEA,GAaXV,EAAEW,UACAC,SACEC,aACE,sBACA,cACA,gCACA,mBACA,kCACA,eACAC,KAAK,KACPC,cAAiB,iEACjBC,iBAAoB,2CACpBC,qBAAwB,+CACxBC,cAAiB,sCAEnBC,SAAY,SAASC,GAEnBpB,EAAE,EAAaoB,EAAWC,KAAKT,QAAQI,kBACtCM,OAAO,cACPZ,KAAK,UAAU,GACfa,MAAM,wDAETC,aAAgB,SAASJ,GAEvBpB,EAAE,EAAaoB,EAAWC,KAAKT,QAAQK,sBACtCK,OAAO,cACPZ,KAAK,UAAU,GACfa,MAAM,+BAETE,MAAS,SAASL,GAEhBpB,EAAE,EAAaoB,EAAWC,KAAKT,QAAQM,eACtCI,OAAO,cACPZ,KAAK,UAAU,GACfa,MAAM,wDAETG,MAAS,SAASN,GAChBpB,EAAE,EAAaoB,EAAWC,KAAKT,QAAQG,eACtCO,OAAO,cACPZ,KAAK,UAAU,GACfiB,KAAM,WACL,GAAIC,GAAQ5B,EAAEqB,KAKd,IAJAO,EAAMC,KAAK,0CACXD,EAAML,MAAM,sCAGRK,EAAME,SAAS,kBAAmB,CACpC,GAAIC,GAAcH,EAAMI,KAAK,cAC7BJ,GAAMI,KAAK,cAAe,MAAMC,YAAY,kBAC5CL,EAAML,MAAM,6BAA+BQ,EAAc,UAc3D,GAVIH,EAAMI,KAAK,cACbJ,EAAML,MAAM,mBAAqBK,EAAMI,KAAK,aAAe,WAIzC,OAAhBJ,EAAMM,OAAiC,aAAfN,EAAMM,OAAwC,KAAhBN,EAAMM,QAC9DN,EAAMO,SAAS,SAIbP,EAAMQ,SAASC,OAAOC,GAAG,eAAgB,CAC3CV,EAAMQ,SAASD,SAAS,YACxB,IAAII,GAASX,EAAMQ,SAASC,OAAOG,QACnCZ,GAAML,MAAMgB,MAIhBvC,EAAEyC,UACDC,GAAG,SAAU,iCAAkC,WAAa1C,EAAEqB,MAAMsB,SACpED,GAAG,gBAAiB,gBAAiB,SAASE,GAC1C3C,EAAQ2C,IACT5C,EAAEqB,MAAMY,YAAY,WAGvBS,GAAG,eAAgB,gBAAiB,WACnC,GAAId,GAAQ5B,EAAEqB,KACK,MAAhBO,EAAMM,MACPN,EAAMO,SAAS,SAEfP,EAAMK,YAAY,WAGrBS,GAAG,QAAS,kCAAmC,WAC9C1C,EAAEqB,MAAMwB,KAAK,SAASV,SAAS,WAEhCO,GAAG,OAAQ,kCAAmC,WAC7C1C,EAAEqB,MAAMwB,KAAK,SAASZ,YAAY,WAEnCS,GAAG,SAAU,8CAA+C,WAC3D,GAAII,GAAQ,EACZ9C,GAAE2B,KAAK3B,EAAEqB,MAAM,GAAG0B,MAAO,SAASC,EAAGC,GACnCC,QAAQC,IAAIF,GACZH,GAASG,EAAKG,KAAO,OAEvBN,EAAQA,EAAMO,UAAU,EAAGP,EAAMQ,OAAS,GACtCR,EACF9C,EAAEqB,MAAMkC,OAAOtB,YAAY,SAE3BjC,EAAEqB,MAAMkC,OAAOpB,SAAS,SAE1BnC,EAAEqB,MAAMkC,OAAOrB,IAAIY,MAGvBU,QAAW,SAASpC,GAClBpB,EAAEwD,SAASC,OAAU,EAAarC,EAAWC,KAAKT,QAAQC,eAE5D6C,KAAQ,WACNrC,KAAKmC,UACLnC,KAAKK,QACLL,KAAKF,WACLE,KAAKG,eACLH,KAAKI,QAEDgB,SAASkB,QACXlB,SAASkB,OAAO,0BAA2B,WACzC3D,EAAEW,SAAS+C,SAKf,WAEE,GAAIE,GAAUC,YAAY,WACxB7D,EAAE,yBAAyB2B,KAAK,WAC1B3B,EAAEqB,MAAMa,OAASlC,EAAEqB,MAAMa,QAAUlC,EAAEqB,MAAMW,KAAK,UAClDhC,EAAEqB,MAAMyC,QAAQ,aAGnB,IAEHC,YAAW,WACTC,cAAcJ,IACb,IAEH,IAAIK,EACJjE,GAAEyC,UACDC,GAAG,QAAS,QAAS,WACpB,GAAIwB,GAAUlE,EAAEqB,MAAM8C,QAAQ,QAAQtB,KAAK,QAC3CoB,GAAUJ,YAAY,WACpBK,EAAQvC,KAAK,WACP3B,EAAEqB,MAAMa,QAAUlC,EAAEqB,MAAMW,KAAK,UACjChC,EAAEqB,MAAMyC,QAAQ,aAGnB,OAEJpB,GAAG,OAAQ,QAAS,WACnBsB,cAAcC,WAOrBG"}

dist/js/ripples.js

@@ -1,179 +1,130 @@
 /* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
-/* globals CustomEvent */
+/* globals jQuery, navigator */
-window.ripples = {
-    init : function(withRipple) {
-        "use strict";
 
-        // Cross browser matches function
+(function($) {
-        function matchesSelector(domElement, selector) {
+  $.ripples = function(options) {
-            var matches = domElement.matches ||
-                domElement.matchesSelector ||
-                domElement.webkitMatchesSelector ||
-                domElement.mozMatchesSelector ||
-                domElement.msMatchesSelector ||
-                domElement.oMatchesSelector;
-            return matches.call(domElement, selector);
-        }
 
-        // animations time
+    // Default options
-        var rippleOutTime = 100,
+    var defaultOptions = {
-            rippleStartTime = 500;
+      "target": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple"
-
+    };
-        // Helper to bind events on dynamically created elements
-        var bind = function(events, selector, callback) {
-            if (typeof events === "string") {
-                events = [events];
-            }
-            events.forEach(function(event) {
-                document.addEventListener(event, function(e) {
-                    var target = (typeof e.detail !== "number") ? e.detail : e.target;
-
-                    if (matchesSelector(target, selector)) {
-                        callback(e, target);
-                    }
-                });
-            });
-        };
-
-        var rippleStart = function(e, target, callback) {
-
-            // Init variables
-            var $rippleWrapper      = target,
-                $el                 = $rippleWrapper.parentNode,
-                $ripple             = document.createElement("div"),
-                elPos               = $el.getBoundingClientRect(),
-                // Mouse pos in most cases
-                mousePos            = {x: e.clientX - elPos.left, y: ((window.ontouchstart) ? e.clientY - window.scrollY: e.clientY) - elPos.top},
-                scale               = "scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
-                rippleEnd           = new CustomEvent("rippleEnd", {detail: $ripple}),
-                _rippleOpacity      = 0.3,
-                refreshElementStyle;
 
 
-            // If multitouch is detected or some other black magic suff is happening...
+    function isTouch() {
-            if (e.touches) {
+      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-                mousePos  = {x: e.touches[0].clientX - elPos.left, y:  e.touches[0].clientY - elPos.top};
+    }
-            }
 
-            $ripplecache = $ripple;
 
-            // Set ripple class
+    // Fade out the ripple and then destroy it
-            $ripple.className = "ripple";
+    function rippleOut(ripple) {
 
-            // Move ripple to the mouse position
+      // Unbind events from ripple
-            $ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
+      ripple.off();
 
-            // Get the clicked target's text color, this will be applied to the ripple as background-color.
+      // Start the out animation
-            var targetColor = window.getComputedStyle($el).color;
+      ripple.addClass("ripple-out");
 
-            // Convert the rgb color to an rgba color with opacity set to __rippleOpacity__
+      // This function is called when the transition "out" ends
-            targetColor = targetColor.replace("rgb", "rgba").replace(")",  ", " + _rippleOpacity + ")");
+      ripple.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
-
+        ripple.remove();
-            // Insert new ripple into ripple wrapper
+      });
-            $rippleWrapper.appendChild($ripple);
-
-            // Make sure the ripple has the class applied (ugly hack but it works)
-            refreshElementStyle = window.getComputedStyle($ripple).opacity;
-
-            // Let other funtions know that this element is animating
-            $ripple.dataset.animating = 1;
-
-            // Set scale value, background-color and opacity to ripple and animate it
-            $ripple.className = "ripple ripple-on";
-
-            // Prepare the style of the ripple
-            var rippleStyle = [
-                $ripple.getAttribute("style"),
-                "background-color: " + targetColor,
-                "-ms-transform: " + scale,
-                "-moz-transform" + scale,
-                "-webkit-transform" + scale,
-                "transform: " + scale
-            ];
-
-            // Apply the style
-            $ripple.setAttribute("style", rippleStyle.join(";"));
-
-            // This function is called when the animation is finished
-            setTimeout(function() {
-
-                // Let know to other functions that this element has finished the animation
-                $ripple.dataset.animating = 0;
-                document.dispatchEvent(rippleEnd);
-                if (callback) {
-                    callback();
-                }
-
-            }, rippleStartTime);
-
-        };
-
-        var rippleOut = function($ripple) {
-            // Clear previous animation
-            $ripple.className = "ripple ripple-on ripple-out";
-
-            // Let ripple fade out (with CSS)
-            setTimeout(function() {
-                $ripple.remove();
-            }, rippleOutTime);
-        };
-
-        // Helper, need to know if mouse is up or down
-        var mouseDown = false;
-        bind(["mousedown", "touchstart"], "*", function() {
-            mouseDown = true;
-        });
-        bind(["mouseup", "touchend", "mouseout"], "*", function() {
-            mouseDown = false;
-        });
-
-        // Append ripple wrapper if not exists already
-        var rippleInit = function(e, target) {
-            if (target.getElementsByClassName("ripple-wrapper").length === 0) {
-                target.className += " withripple";
-                var $rippleWrapper = document.createElement("div");
-                $rippleWrapper.className = "ripple-wrapper";
-                target.appendChild($rippleWrapper);
-                if (window.ontouchstart === null) {
-                    rippleStart(e, $rippleWrapper, function() {
-                        // FIXME: ugly fix for first touchstart event on mobile devices...
-                        $rippleWrapper.getElementsByClassName("ripple")[0].remove();
-                    });
-                }
-            }
-        };
-
-        var $ripplecache;
-
-        // Events handler
-        // init RippleJS and start ripple effect on mousedown
-        bind(["mouseover", "touchstart"], withRipple, rippleInit);
-
-        // start ripple effect on mousedown
-        bind(["mousedown", "touchstart"], ".ripple-wrapper", function(e, $ripple) {
-            // Start ripple only on left or middle mouse click and touch click
-            if (e.which === 0 || e.which === 1 || e.which === 2) {
-                rippleStart(e, $ripple);
-            }
-        });
-
-        // if animation ends and user is not holding mouse then destroy the ripple
-        bind("rippleEnd", ".ripple-wrapper .ripple", function(e, $ripple) {
-
-            var $ripples = $ripple.parentNode.getElementsByClassName("ripple");
-
-            if (!mouseDown || ( $ripples[0] == $ripple && $ripples.length > 1)) {
-                rippleOut($ripple);
-            }
-        });
-
-        // Destroy ripple when mouse is not holded anymore if the ripple still exists
-        bind(["mouseup", "touchend", "mouseout"], ".ripple-wrapper", function() {
-            var $ripple = $ripplecache;
-            if ($ripple && $ripple.dataset.animating != 1) {
-                rippleOut($ripple);
-            }
-        });
 
     }
-};
+
+    // Apply custom options
+    options = $.extend(defaultOptions, options);
+
+
+    $(document)
+    .on("mousedown touchstart", options.target, function(e) {
+      if (isTouch() && e.type == "mousedown") {
+        return false;
+      }
+
+      var element = $(this);
+
+      // If the ripple wrapper does not exists, create it
+      if (!$(this).find(".ripple-wrapper").length) {
+        $(this).append("<div class=ripple-wrapper></div>");
+      }
+
+      var wrapper = $(this).find(".ripple-wrapper");
+
+
+      var wrapperOffset = wrapper.offset(),
+          relX,
+          relY;
+      if (!isTouch()) {
+        // Get the mouse position relative to the ripple wrapper
+        relX = e.pageX - wrapperOffset.left;
+        relY = e.pageY - wrapperOffset.top;
+      } else {
+        // Make sure the user is using only one finger and then get the touch position relative to the ripple wrapper
+        e = e.originalEvent;
+        if (e.touches.length === 1) {
+          relX = e.touches[0].pageX - wrapperOffset.left;
+          relY = e.touches[0].pageY - wrapperOffset.top;
+        } else {
+          return;
+        }
+      }
+
+      // Meet the new ripple
+      var ripple = $("<div></div>");
+
+      // Add to it the ripple class
+      ripple.addClass("ripple");
+
+      // Position it in the right place
+      ripple.css({"left": relX, "top": relY});
+
+      // Set the background color of the ripple
+      ripple.css({"background-color": window.getComputedStyle($(this)[0]).color});
+
+      // Spawn it
+      wrapper.append(ripple);
+
+      // Make sure the ripple has the styles applied (ugly hack but it works)
+      (function() { return window.getComputedStyle(ripple[0]).opacity; })();
+
+      // Set the new size
+      var size = (Math.max($(this).outerWidth(), $(this).outerHeight()) / ripple.outerWidth()) * 2.5;
+
+      ripple.css({
+        "-ms-transform": "scale(" + size + ")",
+        "-moz-transform": "scale(" + size + ")",
+        "-webkit-transform": "scale(" + size + ")",
+        "transform": "scale(" + size + ")"
+      });
+
+      // Start the transition
+      ripple.addClass("ripple-on");
+      ripple.data("animating", "on");
+      ripple.data("mousedown", "on");
+
+      // This function is called when the transition "on" ends
+      setTimeout(function() {
+        ripple.data("animating", "off");
+        if (ripple.data("mousedown") == "off") {
+          rippleOut(ripple);
+        }
+      }, 500);
+
+      // On mouseup or on mouseleave, set the mousedown flag to "off" and try to destroy the ripple
+      element.on("mouseup mouseleave", function() {
+        ripple.data("mousedown", "off");
+        // If the transition "on" is finished then we can destroy the ripple with transition "out"
+        if (ripple.data("animating") == "off") {
+          rippleOut(ripple);
+        }
+      });
+
+    });
+
+  };
+
+  $.fn.ripples = function() {
+    $.ripples({"target": $(this)});
+  };
+
+})(jQuery);

dist/js/ripples.min.js

@@ -1 +1,2 @@
-window.ripples={done:!1,init:function(a){"use strict";function b(a,b){var c=a.matches||a.matchesSelector||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesSelector||a.oMatchesSelector;return c.call(a,b)}if(this.done)return console.log("Ripples.js was already initialzied.");this.done=!0;var c=100,d=500,e=function(a,c,d){"string"==typeof a&&(a=[a]),a.forEach(function(a){document.addEventListener(a,function(a){var e="number"!=typeof a.detail?a.detail:a.target;b(e,c)&&d(a,e)})})},f=function(a,b,c){var e,f=b,g=f.parentNode,h=document.createElement("div"),j=g.getBoundingClientRect(),k={x:a.clientX-j.left,y:(window.ontouchstart?a.clientY-window.scrollY:a.clientY)-j.top},l="scale("+Math.round(f.offsetWidth/5)+")",m=new CustomEvent("rippleEnd",{detail:h}),n=.3;a.touches&&(k={x:a.touches[0].clientX-j.left,y:a.touches[0].clientY-j.top}),i=h,h.className="ripple",h.setAttribute("style","left:"+k.x+"px; top:"+k.y+"px;");var o=window.getComputedStyle(g).color;if(o.indexOf("rgba")>=0){var p=o.lastIndexOf(",")+1;o=o.substring(0,p)+n+")"}else o=o.replace("rgb","rgba").replace(")",", "+n+")");f.appendChild(h),e=window.getComputedStyle(h).opacity,h.dataset.animating=1,h.className="ripple ripple-on";var q=[h.getAttribute("style"),"background-color: "+o,"-ms-transform: "+l,"-moz-transform"+l,"-webkit-transform"+l,"transform: "+l];h.setAttribute("style",q.join(";")),setTimeout(function(){h.dataset.animating=0,document.dispatchEvent(m),c&&c()},d)},g=function(a){a.className="ripple ripple-on ripple-out",setTimeout(function(){a.remove()},c)},h=!1;e(["mousedown","touchstart"],"*",function(){h=!0}),e(["mouseup","touchend","mouseout"],"*",function(){h=!1});var i,j=function(a,b){if(0===b.getElementsByClassName("ripple-wrapper").length){b.className+=" withripple";var c=document.createElement("div");c.className="ripple-wrapper",b.appendChild(c)}};e(["mouseover"],a,j),e(["touchstart"],a,j),e(["mousedown","touchstart"],".ripple-wrapper",function(a,b){(0===a.which||1===a.which||2===a.which)&&f(a,b)}),e("rippleEnd",".ripple-wrapper .ripple",function(a,b){var c=b.parentNode.getElementsByClassName("ripple");(!h||c[0]==b&&c.length>1)&&g(b)}),e(["mouseup","touchend","mouseout"],".ripple-wrapper",function(){var a=i;a&&1!=a.dataset.animating&&g(a)})}};
+!function(a){a.ripples=function(b){function c(){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)}function d(a){a.off(),a.addClass("ripple-out"),a.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",function(){a.remove()})}var e={target:".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple"};b=a.extend(e,b),a(document).on("mousedown touchstart",b.target,function(b){if(c()&&"mousedown"==b.type)return!1;var e=a(this);a(this).find(".ripple-wrapper").length||a(this).append("<div class=ripple-wrapper></div>");var f,g,h=a(this).find(".ripple-wrapper"),i=h.offset();if(c()){if(b=b.originalEvent,1!==b.touches.length)return;f=b.touches[0].pageX-i.left,g=b.touches[0].pageY-i.top}else f=b.pageX-i.left,g=b.pageY-i.top;var j=a("<div></div>");j.addClass("ripple"),j.css({left:f,top:g}),j.css({"background-color":window.getComputedStyle(a(this)[0]).color}),h.append(j),function(){return window.getComputedStyle(j[0]).opacity}();var k=Math.max(a(this).outerWidth(),a(this).outerHeight())/j.outerWidth()*2.5;j.css({"-ms-transform":"scale("+k+")","-moz-transform":"scale("+k+")","-webkit-transform":"scale("+k+")",transform:"scale("+k+")"}),j.addClass("ripple-on"),j.data("animating","on"),j.data("mousedown","on"),setTimeout(function(){j.data("animating","off"),"off"==j.data("mousedown")&&d(j)},500),e.on("mouseup mouseleave",function(){j.data("mousedown","off"),"off"==j.data("animating")&&d(j)})})},a.fn.ripples=function(){a.ripples({target:a(this)})}}(jQuery);
+//# sourceMappingURL=ripples.min.js.map

dist/js/ripples.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripples.min.js","sources":["ripples.js"],"names":["$","ripples","options","isTouch","test","navigator","userAgent","rippleOut","ripple","off","addClass","on","remove","defaultOptions","target","extend","document","e","type","element","this","find","length","append","relX","relY","wrapper","wrapperOffset","offset","originalEvent","touches","pageX","left","pageY","top","css","background-color","window","getComputedStyle","color","opacity","size","Math","max","outerWidth","outerHeight","-ms-transform","-moz-transform","-webkit-transform","transform","data","setTimeout","fn","jQuery"],"mappings":"CAGA,SAAUA,GACRA,EAAEC,QAAU,SAASC,GAQnB,QAASC,KACP,MAAO,iEAAiEC,KAAKC,UAAUC,WAKzF,QAASC,GAAUC,GAGjBA,EAAOC,MAGPD,EAAOE,SAAS,cAGhBF,EAAOG,GAAG,mEAAoE,WAC5EH,EAAOI,WArBX,GAAIC,IACFC,OAAU,gHA0BZZ,GAAUF,EAAEe,OAAOF,EAAgBX,GAGnCF,EAAEgB,UACDL,GAAG,uBAAwBT,EAAQY,OAAQ,SAASG,GACnD,GAAId,KAAuB,aAAVc,EAAEC,KACjB,OAAO,CAGT,IAAIC,GAAUnB,EAAEoB,KAGXpB,GAAEoB,MAAMC,KAAK,mBAAmBC,QACnCtB,EAAEoB,MAAMG,OAAO,mCAGjB,IAIIC,GACAC,EALAC,EAAU1B,EAAEoB,MAAMC,KAAK,mBAGvBM,EAAgBD,EAAQE,QAG5B,IAAKzB,IAIE,CAGL,GADAc,EAAIA,EAAEY,cACmB,IAArBZ,EAAEa,QAAQR,OAIZ,MAHAE,GAAOP,EAAEa,QAAQ,GAAGC,MAAQJ,EAAcK,KAC1CP,EAAOR,EAAEa,QAAQ,GAAGG,MAAQN,EAAcO,QAP5CV,GAAOP,EAAEc,MAAQJ,EAAcK,KAC/BP,EAAOR,EAAEgB,MAAQN,EAAcO,GAajC,IAAI1B,GAASR,EAAE,cAGfQ,GAAOE,SAAS,UAGhBF,EAAO2B,KAAKH,KAAQR,EAAMU,IAAOT,IAGjCjB,EAAO2B,KAAKC,mBAAoBC,OAAOC,iBAAiBtC,EAAEoB,MAAM,IAAImB,QAGpEb,EAAQH,OAAOf,GAGf,WAAc,MAAO6B,QAAOC,iBAAiB9B,EAAO,IAAIgC,UAGxD,IAAIC,GAAQC,KAAKC,IAAI3C,EAAEoB,MAAMwB,aAAc5C,EAAEoB,MAAMyB,eAAiBrC,EAAOoC,aAAgB,GAE3FpC,GAAO2B,KACLW,gBAAiB,SAAWL,EAAO,IACnCM,iBAAkB,SAAWN,EAAO,IACpCO,oBAAqB,SAAWP,EAAO,IACvCQ,UAAa,SAAWR,EAAO,MAIjCjC,EAAOE,SAAS,aAChBF,EAAO0C,KAAK,YAAa,MACzB1C,EAAO0C,KAAK,YAAa,MAGzBC,WAAW,WACT3C,EAAO0C,KAAK,YAAa,OACO,OAA5B1C,EAAO0C,KAAK,cACd3C,EAAUC,IAEX,KAGHW,EAAQR,GAAG,qBAAsB,WAC/BH,EAAO0C,KAAK,YAAa,OAEO,OAA5B1C,EAAO0C,KAAK,cACd3C,EAAUC,QAQlBR,EAAEoD,GAAGnD,QAAU,WACbD,EAAEC,SAASa,OAAUd,EAAEoB,UAGxBiC"}

less/_buttons.less

@@ -76,6 +76,9 @@
 .open > .dropdown-toggle.btn {
     .variations(~"", background-color, @btn-default);
 }
+.btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group {
+  margin-left: 0;
+}
 .btn-group, .btn-group-vertical {
     position: relative;
     border-radius: 2px;
@@ -92,7 +95,6 @@
         box-shadow: none !important;
         margin: 0;
     }
-    .btn:active .caret { margin-left: -1px; }
 }
 .btn-group-flat {
     box-shadow: none !important;

less/_mixins.less

@@ -35,6 +35,9 @@
     &-material-indigo@{extra} {
         @{property}: @indigo;
     }
+    &-material-blue@{extra} {
+        @{property}: @blue;
+    }
     &-material-lightblue@{extra} {
         @{property}: @lightblue;
     }

less/_plugin-dropdownjs.less

@@ -0,0 +1,19 @@
+.dropdownjs:after {
+    right: 5px;
+    top: 3px;
+    font-size: 25px;
+    position: absolute;
+    content: "\e894";
+    font-family: "Material-Design-Icons";
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    pointer-events: none;
+    color: #757575;
+
+}

less/_togglebutton.less

@@ -0,0 +1,68 @@
+.togglebutton {
+  vertical-align: middle;
+  &, * {
+    user-select: none;
+  }
+  label {
+      font-weight: 400;
+      cursor: pointer;
+    // Hide original checkbox
+    input[type=checkbox]:first-child {
+      opacity: 0;
+      width: 0;
+      height:0;
+    }
+    // Switch bg on
+    input[type=checkbox]:first-child:checked + .toggle {
+      background-color: rgba(0, 149, 135, 0.5);
+      // Handle on
+      &:after {
+        background-color: #009587;
+      }
+    }
+    // Switch bg off and disabled
+    .toggle,
+    input[type=checkbox][disabled]:first-child + .toggle {
+      content: "";
+      display: inline-block;
+      width: 30px;
+      height: 15px;
+      background-color: rgba(80, 80, 80, 0.7);
+      border-radius: 15px;
+      margin-right: 10px;
+      transition: background 0.3s ease;
+      vertical-align: middle;
+    }
+    // Handle off
+    .toggle:after {
+      content: "";
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      background-color: #F1F1F1;
+      border-radius: 20px;
+      position: relative;
+      box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4);
+      left: -5px;
+      top: -2px;
+      transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
+    }
+    // Handle disabled
+    input[type=checkbox][disabled]:first-child + .toggle:after,
+    input[type=checkbox][disabled]:checked:first-child + .toggle:after{
+      background-color: #BDBDBD;
+    }
+    // Ripple on
+    input[type=checkbox]:first-child:checked ~ .toggle:active:after {
+      box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba(0, 149, 135, 0.1);
+    }
+    // Ripple off and disabled
+    input[type=checkbox]:first-child ~ .toggle:active:after,
+    input[type=checkbox][disabled]:first-child ~ .toggle:active:after {
+      box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
+    }
+    input[type=checkbox]:first-child:checked + .toggle:after {
+      left: 15px;
+    }
+  }
+}

less/_variables.less

@@ -7,6 +7,7 @@
 @purple: #9C27B0;
 @deeppurple: #673AB7;
 @indigo: #3F51B5;
+@blue: #4285f4;
 @lightblue: #03A9F4;
 @cyan: #00BCD4;
 @teal: #009688;
@@ -21,7 +22,7 @@
 @lightgrey: #ECECEC;
 
 // Bootstrap shades
-@primary: #4285F4;
+@primary: #009587;
 @success: #0F9D58;
 @info: @lightblue;
 @warning: @deeporange;

less/material.less

@@ -4,24 +4,24 @@
 @import "_shadows.less";
 
 body {
-    background-color: #EEEEEE;
+  background-color: #EEEEEE;
-    &.inverse {
+  &.inverse {
-        background: #333333;
+    background: #333333;
-        &, .form-control {
+    &, .form-control {
-            color: @darkbg-text;
+      color: @darkbg-text;
-        }
     }
+  }
 }
 
 
 body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
-    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-weight: 300;
+  font-weight: 300;
 }
 
 h5, h6{
-    font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-weight: 400;
+  font-weight: 400;
 }
 
 // Well and Jumbotrons
@@ -33,6 +33,9 @@ h5, h6{
 // Checkboxes
 @import "_checkboxes.less";
 
+// Toggle buttons
+@import "_togglebutton.less";
+
 // Radios
 @import "_radios.less";
 
@@ -40,7 +43,7 @@ h5, h6{
 @import "_inputs.less";
 
 legend {
-    border-bottom: 0;
+  border-bottom: 0;
 }
 
 // Lists
@@ -50,20 +53,20 @@ legend {
 @import "_navbar.less";
 
 .dropdown-menu {
-    border: 0;
+  border: 0;
-    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-    .divider {
+  .divider {
-        background-color: rgba(229, 229, 229, 0.12);
+    background-color: rgba(229, 229, 229, 0.12);
+  }
+  li {
+    overflow: hidden;
+    position: relative;
+    a:hover {
+      background-color: transparent;
+      color: @primary;
     }
-    li {
+  }
-        overflow: hidden;
+  .variations(~" li a:hover", color, @primary);
-        position: relative;
-        a:hover {
-            background-color: transparent;
-            color: @primary;
-        }
-    }
-    .variations(~" li a:hover", color, @primary);
 }
 
 // Alerts
@@ -74,19 +77,19 @@ legend {
 
 // Typography
 .text-warning {
-    color: @btn-warning;
+  color: @btn-warning;
 }
 .text-primary {
-    color: @btn-primary;
+  color: @btn-primary;
 }
 .text-danger {
-    color: @btn-danger;
+  color: @btn-danger;
 }
 .text-success {
-    color: @btn-success;
+  color: @btn-success;
 }
 .text-info {
-    color: @btn-info;
+  color: @btn-info;
 }
 
 @import "_tabs.less";
@@ -103,7 +106,24 @@ legend {
 
 @import "_panels.less";
 
+.modal {
+  background: rgba(0,0,0,0.3);
+}
+
+// Prevent highlight on mobile
+* {
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  -webkit-tap-highlight-color: transparent;
+  &:focus {
+        outline: 0;
+        border:none;
+        color: rgba(0, 0, 0, 0);
+  }
+}
+
+
 // External plugins
 @import "_plugin-snackbarjs.less";
 @import "_plugin-nouislider.less";
 @import "_plugin-selectize.less";
+@import "_plugin-dropdownjs.less";

less/ripples.less

@@ -9,7 +9,8 @@
     width: 100%;
     height: 100%;
     overflow: hidden;
-    border-radius: 2px;
+    border-radius: inherit;
+    pointer-events: none;
 }
 .ripple {
     position: absolute;
@@ -26,7 +27,7 @@
 }
 .ripple.ripple-on {
     transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
-    opacity: 1;
+    opacity: 0.15;
 }
 .ripple.ripple-out {
     transition: opacity 0.1s linear 0s !important;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-material",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "Material Design for Bootstrap 3",
   "main": "index.js",
   "scripts": {

scripts/material.js

@@ -1,170 +1,179 @@
-/* globals jQuery, ripples */
+/* globals jQuery */
 
 (function($) {
-    // Selector to select only not already processed elements
+  // Selector to select only not already processed elements
-    $.expr[":"].notmdproc = function(obj){
+  $.expr[":"].notmdproc = function(obj){
-        if ($(obj).data("mdproc")) {
+    if ($(obj).data("mdproc")) {
-            return false;
+      return false;
-        } else {
+    } else {
-            return true;
+      return true;
-        }
-    };
-
-    function _isChar(evt) {
-        if (typeof evt.which == "undefined") {
-            return true;
-        } else if (typeof evt.which == "number" && evt.which > 0) {
-            return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8;
-        }
-        return false;
     }
+  };
 
-    $.material =  {
+  function _isChar(evt) {
-        "options": {
+    if (typeof evt.which == "undefined") {
-            "withRipples": [
+      return true;
-                ".btn:not(.btn-link)",
+    } else if (typeof evt.which == "number" && evt.which > 0) {
-                ".card-image",
+      return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8;
-                ".navbar a:not(.withoutripple)",
+    }
-                ".dropdown-menu a",
+    return false;
-                ".nav-tabs a:not(.withoutripple)",
+  }
-                ".withripple"
-            ].join(","),
-            "inputElements": "input.form-control, textarea.form-control, select.form-control",
-            "checkboxElements": ".checkbox > label > input[type=checkbox]",
-            "radioElements": ".radio > label > input[type=radio]"
-        },
-        "checkbox": function(selector) {
-            // Add fake-checkbox to material checkboxes
-            $((selector) ? selector : this.options.checkboxElements)
-            .filter(":notmdproc")
-            .data("mdproc", true)
-            .after("<span class=ripple></span><span class=check></span>");
-        },
-        "radio": function(selector) {
-            // Add fake-radio to material radios
-            $((selector) ? selector : this.options.radioElements)
-            .filter(":notmdproc")
-            .data("mdproc", true)
-            .after("<span class=circle></span><span class=check></span>");
-        },
-        "input": function(selector) {
-            $((selector) ? selector : this.options.inputElements)
-            .filter(":notmdproc")
-            .data("mdproc", true)
-            .each( function() {
-                var $this = $(this);
-                $this.wrap("<div class=form-control-wrapper></div>");
-                $this.after("<span class=material-input></span>");
 
-                // Add floating label if required
+  $.material =  {
-                if ($this.hasClass("floating-label")) {
+    "options": {
-                    var placeholder = $this.attr("placeholder");
+      "withRipples": [
-                    $this.attr("placeholder", null).removeClass("floating-label");
+        ".btn:not(.btn-link)",
-                    $this.after("<div class=floating-label>" + placeholder + "</div>");
+        ".card-image",
-                }
+        ".navbar a:not(.withoutripple)",
+        ".dropdown-menu a",
+        ".nav-tabs a:not(.withoutripple)",
+        ".withripple"
+      ].join(","),
+      "inputElements": "input.form-control, textarea.form-control, select.form-control",
+      "checkboxElements": ".checkbox > label > input[type=checkbox]",
+      "togglebuttonElements": ".togglebutton > label > input[type=checkbox]",
+      "radioElements": ".radio > label > input[type=radio]"
+    },
+    "checkbox": function(selector) {
+      // Add fake-checkbox to material checkboxes
+      $((selector) ? selector : this.options.checkboxElements)
+      .filter(":notmdproc")
+      .data("mdproc", true)
+      .after("<span class=ripple></span><span class=check></span>");
+    },
+    "togglebutton": function(selector) {
+      // Add fake-checkbox to material checkboxes
+      $((selector) ? selector : this.options.togglebuttonElements)
+      .filter(":notmdproc")
+      .data("mdproc", true)
+      .after("<span class=toggle></span>");
+    },
+    "radio": function(selector) {
+      // Add fake-radio to material radios
+      $((selector) ? selector : this.options.radioElements)
+      .filter(":notmdproc")
+      .data("mdproc", true)
+      .after("<span class=circle></span><span class=check></span>");
+    },
+    "input": function(selector) {
+      $((selector) ? selector : this.options.inputElements)
+      .filter(":notmdproc")
+      .data("mdproc", true)
+      .each( function() {
+        var $this = $(this);
+        $this.wrap("<div class=form-control-wrapper></div>");
+        $this.after("<span class=material-input></span>");
 
-                // Add hint label if required
+        // Add floating label if required
-                if ($this.attr("data-hint")) {
+        if ($this.hasClass("floating-label")) {
-                    $this.after("<div class=hint>" + $this.attr("data-hint") + "</div>");
+          var placeholder = $this.attr("placeholder");
-                }
+          $this.attr("placeholder", null).removeClass("floating-label");
-
+          $this.after("<div class=floating-label>" + placeholder + "</div>");
-                // Set as empty if is empty (damn I must improve this...)
-                if ($this.val() === null || $this.val() == "undefined" || $this.val() === "") {
-                    $this.addClass("empty");
-                }
-
-                // Support for file input
-                if ($this.parent().next().is("[type=file]")) {
-                    $this.parent().addClass("fileinput");
-                    var $input = $this.parent().next().detach();
-                    $this.after($input);
-                }
-            });
-
-            $(document)
-            .on("change", ".checkbox input[type=checkbox]", function() { $(this).blur(); })
-            .on("keydown paste", ".form-control", function(e) {
-                if(_isChar(e)) {
-                    $(this).removeClass("empty");
-                }
-            })
-            .on("keyup change", ".form-control", function() {
-                var $this = $(this);
-                if($this.val() === "") {
-                    $this.addClass("empty");
-                } else {
-                    $this.removeClass("empty");
-                }
-            })
-            .on("focus", ".form-control-wrapper.fileinput", function() {
-                $(this).find("input").addClass("focus");
-            })
-            .on("blur", ".form-control-wrapper.fileinput", function() {
-                $(this).find("input").removeClass("focus");
-            })
-            .on("change", ".form-control-wrapper.fileinput [type=file]", function() {
-                var value = "";
-                $.each($(this)[0].files, function(i, file) {
-                    console.log(file);
-                    value += file.name + ", ";
-                });
-                value = value.substring(0, value.length - 2);
-                if (value) {
-                    $(this).prev().removeClass("empty");
-                } else {
-                    $(this).prev().addClass("empty");
-                }
-                $(this).prev().val(value);
-            });
-        },
-        "ripples": function(selector) {
-            ripples.init((selector) ? selector : this.options.withRipples);
-        },
-        "init": function() {
-            this.ripples();
-            this.input();
-            this.checkbox();
-            this.radio();
-
-            if (document.arrive) {
-                document.arrive("input, textarea, select", function() {
-                    $.material.init();
-                });
-            }
-
-            // Detect autofill
-            (function() {
-                // This part of code will detect autofill when the page is loading (username and password inputs for example)
-                var loading = setInterval(function() {
-                    $("input[type!=checkbox]").each(function() {
-                        if ($(this).val() && $(this).val() !== $(this).attr("value")) {
-                            $(this).trigger("change");
-                        }
-                    });
-                }, 100);
-                // After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
-                setTimeout(function() {
-                    clearInterval(loading);
-                }, 10000);
-                // Now we just listen on inputs of the focused form (because user can select from the autofill dropdown only when the input has focus)
-                var focused;
-                $(document)
-                .on("focus", "input", function() {
-                    var $inputs = $(this).parents("form").find("input");
-                    focused = setInterval(function() {
-                        $inputs.each(function() {
-                            if ($(this).val() !== $(this).attr("value")) {
-                                $(this).trigger("change");
-                            }
-                        });
-                    }, 100);
-                })
-                .on("blur", "input", function() {
-                    clearInterval(focused);
-                });
-
-            })();
         }
-    };
+
+        // Add hint label if required
+        if ($this.attr("data-hint")) {
+          $this.after("<div class=hint>" + $this.attr("data-hint") + "</div>");
+        }
+
+        // Set as empty if is empty (damn I must improve this...)
+        if ($this.val() === null || $this.val() == "undefined" || $this.val() === "") {
+          $this.addClass("empty");
+        }
+
+        // Support for file input
+        if ($this.parent().next().is("[type=file]")) {
+          $this.parent().addClass("fileinput");
+          var $input = $this.parent().next().detach();
+          $this.after($input);
+        }
+      });
+
+      $(document)
+      .on("change", ".checkbox input[type=checkbox]", function() { $(this).blur(); })
+      .on("keydown paste", ".form-control", function(e) {
+        if(_isChar(e)) {
+          $(this).removeClass("empty");
+        }
+      })
+      .on("keyup change", ".form-control", function() {
+        var $this = $(this);
+        if($this.val() === "") {
+          $this.addClass("empty");
+        } else {
+          $this.removeClass("empty");
+        }
+      })
+      .on("focus", ".form-control-wrapper.fileinput", function() {
+        $(this).find("input").addClass("focus");
+      })
+      .on("blur", ".form-control-wrapper.fileinput", function() {
+        $(this).find("input").removeClass("focus");
+      })
+      .on("change", ".form-control-wrapper.fileinput [type=file]", function() {
+        var value = "";
+        $.each($(this)[0].files, function(i, file) {
+          console.log(file);
+          value += file.name + ", ";
+        });
+        value = value.substring(0, value.length - 2);
+        if (value) {
+          $(this).prev().removeClass("empty");
+        } else {
+          $(this).prev().addClass("empty");
+        }
+        $(this).prev().val(value);
+      });
+    },
+    "ripples": function(selector) {
+      $.ripples({"target": (selector) ? selector : this.options.withRipples});
+    },
+    "init": function() {
+      this.ripples();
+      this.input();
+      this.checkbox();
+      this.togglebutton();
+      this.radio();
+
+      if (document.arrive) {
+        document.arrive("input, textarea, select", function() {
+          $.material.init();
+        });
+      }
+
+      // Detect autofill
+      (function() {
+        // This part of code will detect autofill when the page is loading (username and password inputs for example)
+        var loading = setInterval(function() {
+          $("input[type!=checkbox]").each(function() {
+            if ($(this).val() && $(this).val() !== $(this).attr("value")) {
+              $(this).trigger("change");
+            }
+          });
+        }, 100);
+        // After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
+        setTimeout(function() {
+          clearInterval(loading);
+        }, 10000);
+        // Now we just listen on inputs of the focused form (because user can select from the autofill dropdown only when the input has focus)
+        var focused;
+        $(document)
+        .on("focus", "input", function() {
+          var $inputs = $(this).parents("form").find("input");
+          focused = setInterval(function() {
+            $inputs.each(function() {
+              if ($(this).val() !== $(this).attr("value")) {
+                $(this).trigger("change");
+              }
+            });
+          }, 100);
+        })
+        .on("blur", "input", function() {
+          clearInterval(focused);
+        });
+
+      })();
+    }
+  };
 
 })(jQuery);

scripts/ripples.js

@@ -1,189 +1,130 @@
 /* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
-/* globals CustomEvent */
+/* globals jQuery, navigator */
-window.ripples = {
-    done: false,
-    init : function(withRipple) {
-        "use strict";
 
-        if (this.done) {
+(function($) {
-            return console.log("Ripples.js was already initialzied.");
+  $.ripples = function(options) {
-        }
 
-        this.done = true;
+    // Default options
+    var defaultOptions = {
+      "target": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple"
+    };
 
 
-        // Cross browser matches function
+    function isTouch() {
-        function matchesSelector(domElement, selector) {
+      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-            var matches = domElement.matches ||
+    }
-                domElement.matchesSelector ||
-                domElement.webkitMatchesSelector ||
-                domElement.mozMatchesSelector ||
-                domElement.msMatchesSelector ||
-                domElement.oMatchesSelector;
-            return matches.call(domElement, selector);
-        }
-
-        // animations time
-        var rippleOutTime = 100,
-            rippleStartTime = 500;
-
-        // Helper to bind events on dynamically created elements
-        var bind = function(events, selector, callback) {
-            if (typeof events === "string") {
-                events = [events];
-            }
-            events.forEach(function(event) {
-                document.addEventListener(event, function(e) {
-                    var target = (typeof e.detail !== "number") ? e.detail : e.target;
-
-                    if (matchesSelector(target, selector)) {
-                        callback(e, target);
-                    }
-                });
-            });
-        };
-
-        var rippleStart = function(e, target, callback) {
-
-            // Init variables
-            var $rippleWrapper      = target,
-                $el                 = $rippleWrapper.parentNode,
-                $ripple             = document.createElement("div"),
-                elPos               = $el.getBoundingClientRect(),
-                // Mouse pos in most cases
-                mousePos            = {x: e.clientX - elPos.left, y: ((window.ontouchstart) ? e.clientY - window.scrollY: e.clientY) - elPos.top},
-                scale               = "scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
-                rippleEnd           = new CustomEvent("rippleEnd", {detail: $ripple}),
-                _rippleOpacity      = 0.3,
-                refreshElementStyle;
 
 
-            // If multitouch is detected or some other black magic suff is happening...
+    // Fade out the ripple and then destroy it
-            if (e.touches) {
+    function rippleOut(ripple) {
-                mousePos  = {x: e.touches[0].clientX - elPos.left, y:  e.touches[0].clientY - elPos.top};
-            }
 
-            $ripplecache = $ripple;
+      // Unbind events from ripple
+      ripple.off();
 
-            // Set ripple class
+      // Start the out animation
-            $ripple.className = "ripple";
+      ripple.addClass("ripple-out");
 
-            // Move ripple to the mouse position
+      // This function is called when the transition "out" ends
-            $ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
+      ripple.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
-
+        ripple.remove();
-            // Get the clicked target's text color, this will be applied to the ripple as background-color.
+      });
-            var targetColor = window.getComputedStyle($el).color;
-
-            // Convert the rgb color to an rgba color with opacity set to __rippleOpacity__
-            if ( targetColor.indexOf("rgba") >= 0 ) {
-                var alphaPosition = targetColor.lastIndexOf(",") + 1;
-                targetColor = targetColor.substring(0, alphaPosition) + _rippleOpacity + ")";
-            } else {
-                targetColor = targetColor.replace("rgb", "rgba").replace(")", ", " + _rippleOpacity + ")");
-            }
-
-            // Insert new ripple into ripple wrapper
-            $rippleWrapper.appendChild($ripple);
-
-            // Make sure the ripple has the class applied (ugly hack but it works)
-            refreshElementStyle = window.getComputedStyle($ripple).opacity;
-
-            // Let other funtions know that this element is animating
-            $ripple.dataset.animating = 1;
-
-            // Set scale value, background-color and opacity to ripple and animate it
-            $ripple.className = "ripple ripple-on";
-
-            // Prepare the style of the ripple
-            var rippleStyle = [
-                $ripple.getAttribute("style"),
-                "background-color: " + targetColor,
-                "-ms-transform: " + scale,
-                "-moz-transform" + scale,
-                "-webkit-transform" + scale,
-                "transform: " + scale
-            ];
-
-            // Apply the style
-            $ripple.setAttribute("style", rippleStyle.join(";"));
-
-            // This function is called when the animation is finished
-            setTimeout(function() {
-
-                // Let know to other functions that this element has finished the animation
-                $ripple.dataset.animating = 0;
-                document.dispatchEvent(rippleEnd);
-                if (callback) {
-                    callback();
-                }
-
-            }, rippleStartTime);
-
-        };
-
-        var rippleOut = function($ripple) {
-            // Clear previous animation
-            $ripple.className = "ripple ripple-on ripple-out";
-
-            // Let ripple fade out (with CSS)
-            setTimeout(function() {
-                $ripple.remove();
-            }, rippleOutTime);
-        };
-
-        // Helper, need to know if mouse is up or down
-        var mouseDown = false;
-        bind(["mousedown", "touchstart"], "*", function() {
-            mouseDown = true;
-        });
-        bind(["mouseup", "touchend", "mouseout"], "*", function() {
-            mouseDown = false;
-        });
-
-        // Append ripple wrapper if not exists already
-        var rippleInit = function(e, target) {
-            if (target.getElementsByClassName("ripple-wrapper").length === 0) {
-                target.className += " withripple";
-                var $rippleWrapper = document.createElement("div");
-                $rippleWrapper.className = "ripple-wrapper";
-                target.appendChild($rippleWrapper);
-            }
-        };
-
-        var $ripplecache;
-
-        // Events handler
-        // init RippleJS and start ripple effect on mousedown
-        bind(["mouseover"], withRipple, rippleInit);
-
-        // Init if the device is touch screen
-        bind(["touchstart"], withRipple, rippleInit);
-
-        // start ripple effect on mousedown
-        bind(["mousedown", "touchstart"], ".ripple-wrapper", function(e, $ripple) {
-            // Start ripple only on left or middle mouse click and touch click
-            if (e.which === 0 || e.which === 1 || e.which === 2) {
-                rippleStart(e, $ripple);
-            }
-        });
-
-        // if animation ends and user is not holding mouse then destroy the ripple
-        bind("rippleEnd", ".ripple-wrapper .ripple", function(e, $ripple) {
-
-            var $ripples = $ripple.parentNode.getElementsByClassName("ripple");
-
-            if (!mouseDown || ( $ripples[0] == $ripple && $ripples.length > 1)) {
-                rippleOut($ripple);
-            }
-        });
-
-        // Destroy ripple when mouse is not holded anymore if the ripple still exists
-        bind(["mouseup", "touchend", "mouseout"], ".ripple-wrapper", function() {
-            var $ripple = $ripplecache;
-            if ($ripple && $ripple.dataset.animating != 1) {
-                rippleOut($ripple);
-            }
-        });
 
     }
-};
+
+    // Apply custom options
+    options = $.extend(defaultOptions, options);
+
+
+    $(document)
+    .on("mousedown touchstart", options.target, function(e) {
+      if (isTouch() && e.type == "mousedown") {
+        return false;
+      }
+
+      var element = $(this);
+
+      // If the ripple wrapper does not exists, create it
+      if (!$(this).find(".ripple-wrapper").length) {
+        $(this).append("<div class=ripple-wrapper></div>");
+      }
+
+      var wrapper = $(this).find(".ripple-wrapper");
+
+
+      var wrapperOffset = wrapper.offset(),
+          relX,
+          relY;
+      if (!isTouch()) {
+        // Get the mouse position relative to the ripple wrapper
+        relX = e.pageX - wrapperOffset.left;
+        relY = e.pageY - wrapperOffset.top;
+      } else {
+        // Make sure the user is using only one finger and then get the touch position relative to the ripple wrapper
+        e = e.originalEvent;
+        if (e.touches.length === 1) {
+          relX = e.touches[0].pageX - wrapperOffset.left;
+          relY = e.touches[0].pageY - wrapperOffset.top;
+        } else {
+          return;
+        }
+      }
+
+      // Meet the new ripple
+      var ripple = $("<div></div>");
+
+      // Add to it the ripple class
+      ripple.addClass("ripple");
+
+      // Position it in the right place
+      ripple.css({"left": relX, "top": relY});
+
+      // Set the background color of the ripple
+      ripple.css({"background-color": window.getComputedStyle($(this)[0]).color});
+
+      // Spawn it
+      wrapper.append(ripple);
+
+      // Make sure the ripple has the styles applied (ugly hack but it works)
+      (function() { return window.getComputedStyle(ripple[0]).opacity; })();
+
+      // Set the new size
+      var size = (Math.max($(this).outerWidth(), $(this).outerHeight()) / ripple.outerWidth()) * 2.5;
+
+      ripple.css({
+        "-ms-transform": "scale(" + size + ")",
+        "-moz-transform": "scale(" + size + ")",
+        "-webkit-transform": "scale(" + size + ")",
+        "transform": "scale(" + size + ")"
+      });
+
+      // Start the transition
+      ripple.addClass("ripple-on");
+      ripple.data("animating", "on");
+      ripple.data("mousedown", "on");
+
+      // This function is called when the transition "on" ends
+      setTimeout(function() {
+        ripple.data("animating", "off");
+        if (ripple.data("mousedown") == "off") {
+          rippleOut(ripple);
+        }
+      }, 500);
+
+      // On mouseup or on mouseleave, set the mousedown flag to "off" and try to destroy the ripple
+      element.on("mouseup mouseleave", function() {
+        ripple.data("mousedown", "off");
+        // If the transition "on" is finished then we can destroy the ripple with transition "out"
+        if (ripple.data("animating") == "off") {
+          rippleOut(ripple);
+        }
+      });
+
+    });
+
+  };
+
+  $.fn.ripples = function() {
+    $.ripples({"target": $(this)});
+  };
+
+})(jQuery);