Merge pull request #725 from rosskevin/standardized-form-markup

Standardized form markup and spec compliance v.0.4.0

.travis.yml

@@ -2,13 +2,20 @@ language: node_js
 
 node_js: 0.10.33
 
+sudo: false # use new container infrastructure
+
+# sass setup
+cache: bundler # speeds up bundler
+rvm:
+  - 2.2.2
+
 before_script:
   - npm install -g grunt-cli
-  - export DISPLAY=:99.0
+  #- export DISPLAY=:99.0
-  - sh -e /etc/init.d/xvfb start
+  #- sh -e /etc/init.d/xvfb start
   # Install meteor
-  - curl https://install.meteor.com | /bin/sh
+  #- curl https://install.meteor.com | /bin/sh
   # Install spacejam, Meteor's CI helper
-  - npm install -g spacejam
+  #- npm install -g spacejam
 
-script: grunt cibuild
+script: bundle install && grunt cibuild

Gruntfile.js

@@ -5,13 +5,37 @@ module.exports = function (grunt) {
 
   grunt.initConfig({
 
+    htmllint: {
+      //options: {
+      //  stoponerror: false,
+      //  relaxerror: []
+      //},
+      //files: ['index.html', 'bootstrap-elements.html']
+      all: {
+        options: {
+          ignore: '“&” did not start a character reference. (“&” probably should have been escaped as “&”.)'
+        },
+        src: ["*.html"]
+      }
+    },
+
+
+    // Make sure we are structurally correct for bootstrap
+    bootlint: {
+      options: {
+        stoponerror: false,
+        relaxerror: []
+      },
+      files: ['index.html', 'bootstrap-elements.html']
+    },
+
     // Convert from less to sass
     lessToSass: {
       convert: {
         files: [{
           expand: true,
           cwd: "less",
-          src: ["*.less", "!_mixins.less", "!_mixins-fullpalette.less"],
+          src: ["*.less", "!_mixins.less", "!_mixins-fullpalette.less", "!_mixins-shared.less"],
           ext: ".scss",
           dest: "sass"
         }],
@@ -80,6 +104,12 @@ module.exports = function (grunt) {
               order: 24
             },
 
+            // material-placehorder
+            { // Multi-line replacement - https://regex101.com/r/eS2vQ3/2
+              pattern: /.material-placeholder\({$\n([\s\S]+?)}\);$\n/mg,
+              replacement: "@include material-placeholder {\n$1\n}\n",
+              order: 24
+            },
 
             // fix calc references
             { // https://regex101.com/r/aZ8iI5/1
@@ -320,9 +350,13 @@ module.exports = function (grunt) {
       }
     },
     watch: {
+      html: {
+        files: ["index.html", "bootstrap-elements.html", "test.html"],
+        tasks: ["htmllint", "bootlint"]
+      },
       js: {
         files: ["Gruntfile.js", "scripts/**/*.js", "template/**/*.js"],
-        tasks: ["newer:jshint:all"]
+        tasks: ["newer:jshint:all", "material:js"]
       },
       jsTest: {
         files: ["test/**/*.js"],
@@ -330,18 +364,20 @@ module.exports = function (grunt) {
       },
       less: {
         files: ["less/**/*.less"],
-        tasks: ["material:less", "material:sass"]
+        tasks: ["material:less"]//, "material:sass"]
-      },
-      sass: {
-        files: ["sass/*.scss"],
-        tasks: ["material:sass"]
       },
+      //sass: {
+      //  files: ["sass/*.scss"],
+      //  tasks: ["material:sass"]
+      //},
       livereload: {
         options: {
           livereload: "<%= connect.options.livereload %>"
         },
         files: [
           "index.html",
+          "bootstrap-elements.html",
+          "dist/js/**/*.js",
           "dist/css/**/*.css",
           "demo/**/*.{png,jpg,jpeg,gif,webp,svg}"
         ]
@@ -384,6 +420,7 @@ module.exports = function (grunt) {
   grunt.registerTask("material", [
     "material:less",
     "material:js",
+    "material:fonts",
     "material:sass"
   ]);
 
@@ -393,6 +430,8 @@ module.exports = function (grunt) {
   ]);
 
   grunt.registerTask("material:less", [
+    "htmllint",
+    "bootlint",
     "less:material",
     "less:materialfullpalette",
     "less:roboto",
@@ -407,6 +446,9 @@ module.exports = function (grunt) {
     "copy:material",
     "uglify:material"
   ]);
+  grunt.registerTask("material:fonts", [
+    "copy:fonts"
+  ]);
 
   grunt.registerTask("ripples", [
     "ripples:less",
@@ -448,6 +490,6 @@ module.exports = function (grunt) {
   grunt.registerTask("meteor-publish", ["exec:meteor-init", "exec:meteor-publish", "exec:meteor-cleanup"]);
   grunt.registerTask("meteor", ["exec:meteor-init", "exec:meteor-test", "exec:meteor-publish", "exec:meteor-cleanup"]);
 
-  grunt.registerTask("cibuild", ["newer:jshint", "meteor-test"]);
+  //grunt.registerTask("cibuild", ["newer:jshint", "meteor-test"]);
-
+  grunt.registerTask("cibuild", ["build"]);
 };

README.md

@@ -1,3 +1,5 @@
+# bootstrap-material-design
+
 [![build status](https://travis-ci.org/FezVrasta/bootstrap-material-design.svg?branch=master)](https://travis-ci.org/FezVrasta/bootstrap-material-design)
 [![gratipay](https://img.shields.io/gratipay/FezVrasta.svg)](https://gratipay.com/FezVrasta)
 [![Bower version](https://badge.fury.io/bo/bootstrap-material-design.svg)](https://github.com/FezVrasta/bootstrap-material-design)
@@ -29,20 +31,22 @@ If you prefer, you can include this framework in your project using our official
 Navigate to the `dist/` folder in this repository, and you will see the `test.html` file, which has the CSS include statements, in the `head` section and the JS includes just before `body` section closes.
 You need to copy the `dist/` folder to the root of your project, ensuring that all the files in your project can access the files through the relative URL, supplied in the CSS and the JS includes.
 
-#### material-fullpalette.css or material.css?
+### material-fullpalette.css or material.css?
 
 The only difference is that `material-fullpalette.css` has the full colors palette available, the other one has just the primary colors.
 
-#### Use custom color as primary
+### Use custom color as primary
 
 Is often asked how to change the primary color of this theme without edit the bower package directly.
 
 You can do it by creating a less file in your project:
 
+```css
 @import "../bower_components/bootstrap-material-design/less/material.less";
 
 // Override @primary color with one took from _colors.less
 @primary: @deep-purple;
+```    
 
 Then, compiling this file, the entire theme will be compiled using the color chosen by you.
 
@@ -57,10 +61,11 @@ Run the `grunt test` command for browser-based Jasmine unit tests.
 
 Run the `grunt serve` command to build and fire up an http server with live-reload and a watch for development purposes.
 
-### LESS & SASS
+## LESS & SASS
 
-Currently only LESS is maintained. The SASS version no longer has a maintainer (#256).
+The bootstrap 3.x compatible version (master) is developed using LESS, with an automated conversion to SASS.
-The SASS files are in the source just in case someone wants to update the source from SASS and use these files as a base.
+
+The upcoming 4.x version (no branch yet) will be developed using SASS.
 
 ## Support me
 
@@ -74,44 +79,112 @@ If you like this project you may support me by donating something on Gittip, sta
 Please see the [CONTRIBUTING.md](CONTRIBUTING.md) file.
 
 
-# Documentation
+## Documentation
 
-Material Design for Bootstrap provides some additional stuff to get the best from Material Design.
+Material Design ([spec](http://www.google.com/design/spec/material-design/introduction.html)) for Bootstrap provides 
+styles for bootstrap based markup to comply with Material Design concepts.
 
-### Variations
+### Color Variations
 
 There are 17 additional color variations (in addition to the classic 4 variations) for buttons, inputs, checkboxes, radios, alerts, navbars, tabs, labels, paginations, progress bars and more.
 They can be used by adding the class suffix `-material-color` to the desired element and replacing `color` with the desired one.
 
 Example:
 
+```html
 <button class="btn btn-material-deep-purple">Deep purple button</button>
+```
 
 These colors are taken from the Material Design color palette and are reported below:
 
 ![palette](demo/imgs/palette.jpg)
 
-To take advantage of all the shades please use `material-fullpalette.css`, be aware of its huge size.
+To take advantage of all the shades please use `material-fullpalette.css`, but please be aware of its huge size.
 
-### Buttons
+### Forms
+
+All inputs should be surrounded by a standard `.form-group`, and as such `material.js` will enforce this.  The `.form-group` is
+used to signal different input styles and variations.  See the examples for variations.
+
+#### Sizing
+
+In general, it is preferred that sizing be altered with either `.form-group-sm` or `.form-group-lg`.  Due to the interconnected
+nature of inputs, labels, margins and padding, `material.js` will convert any use of `.input-sm` or `.input-lg` to 
+`.form-group-sm` or `.form-group-lg` in order to reduce the necessary markup/variations and get a standard sizing with
+fewer side effects.
+
+#### Buttons
 
 Add `.btn-flat` to a button to make it flat, without shadows.
 Add `.btn-raised` to a button to add a permanent shadow to it.
 
-### Inputs
+#### Inputs
 
-Add `.floating-label` to an input field with a `placeholder` to transform the placeholder in a floating label.
+##### Labels
 
-Add `data-hint="some hint"` to show an hint under the input when the user focus it.
+The following classes should be placed on the `.form-group` to indicate the label style:
 
-Remember to use the proper HTML markup to get radio and checkboxes styled correctly (choose between *radio* or *checkbox*):
+- `.label-floating` - renders label as a placeholder, that animates above the field upon focus
+- `.label-static` - renders label above the field. `input placeholder` attribute can also be used in conjunction
+- `.label-placeholder` - renders a label as a placeholder only 
+- no label, but use of `input placeholder` attribute - same rendering as `.label-placeholder`
 
-    <div class="radio/checkbox radio-primary">
+##### Hints
+
+Upon focus, a hint can be displayed.  Use any `p | span` with `.help-block`.
+
+
+##### Examples
+
+```html
+  <div class="form-group label-static">
+    <label for="i2" class="control-label">label-static</label>
+    <input type="email" class="form-control" id="i2" placeholder="placeholder attribute">
+    <p class="help-block">This is a hint as a <code>p.help-block.hint</code></p>
+  </div>
+
+  <div class="form-group label-floating">
+    <label for="i5" class="control-label">label-floating</label>
+    <input type="email" class="form-control" id="i5">
+    <span class="help-block">This is a hint as a <code>span.help-block.hint</code></span>
+  </div>
+
+  <div class="form-group label-placeholder">
+    <label for="i5p" class="control-label">label-placeholder</label>
+    <input type="email" class="form-control" id="i5p">
+    <span class="help-block">This is a hint as a <code>span.help-block.hint</code></span>
+  </div>
+```
+
+
+#### Radio, Checkbox, Toggle
+
+Be sure to inspect the source of the demos to find proper markup examples. Remember to use the proper HTML markup.
+
+Radio example:
+
+```html
+<div class="form-group">
+  <label class="col-lg-2 control-label">Radios</label>
+
+  <div class="col-lg-10">
+    <div class="radio radio-primary">
       <label>
-            <input type="radio/checkbox" checked>
+        <input type="radio" name="optionsRadios" checked="">
-            Option one is this
+        Option one
       </label>
     </div>
+    <div class="radio radio-primary">
+      <label>
+        <input type="radio" name="optionsRadios">
+        Option two
+      </label>
+    </div>
+  </div>
+</div>
+```      
+        
+        
 
 ### Icons
 
@@ -123,7 +196,9 @@ Variations are available for every icon, including the original Bootstrap icons.
 
 The syntax to add a Material icon is:
 
+```html
 <i class="icon icon-material-favorite"></i>
+```
 
 ### Cards 
 
@@ -131,6 +206,7 @@ A card will expand to fill all of the available width (e.g. column's width). Car
 
 Here is an example on how to use it:
 
+```html
 <div class="card">
 
     <div class="card-height-indicator"></div>
@@ -154,8 +230,11 @@ Here is an example on how to use it:
     </div>
 
 </div>
+```    
+    
 Cards will adapt to column's width. The card below will have width equal to col-lg-6:
 
+```html
 <div class="row">
     <div class="col-lg-3"></div>
 
@@ -167,7 +246,7 @@ Cards will adapt to column's width. The card below will have width equal to col-
 
     <div class="col-lg-3"></div>
 </div>
-
+```
 
 ## Material.js
 
@@ -189,12 +268,14 @@ The functions that allows an optional selector are `$.material.ripples`, `$.mate
 
 You can even override the default values using the `$.material.options` function. The default values are:
 
+```javascript
 $.material.options = {
     "withRipples": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple",
     "inputElements": "input.form-control, textarea.form-control, select.form-control",
     "checkboxElements": ".checkbox > label > input[type=checkbox]",
     "radioElements": ".radio > label > input[type=radio]"
 }
+```    
 
 ### Arrive.js support
 
@@ -215,7 +296,9 @@ At the moment RipplesJS does not have its own repository but it will probably ha
 
 You may want to set a custom color to the ripples of a specific element, to do so write:
 
+```html
 <button class="btn btn-default" data-ripple-color="#F0F0F0">Custom ripple</button>
+```
 
 ### noUiSlider
 

bower.json

@@ -1,6 +1,5 @@
 {
   "name": "bootstrap-material-design",
-  "version": "0.3.1-dev",
   "homepage": "http://fezvrasta.github.io/bootstrap-material-design",
   "authors": [
     "Federico Zivolo <info@mywebexpression.com>"

dist/js/material.js

@@ -70,36 +70,57 @@
       .filter(":notmdproc")
       .data("mdproc", true)
       .each( function() {
-        var $this = $(this);
+        var $input = $(this);
 
-        if (!$this.attr("data-hint") && !$this.hasClass("floating-label")) {
+        // Requires form-group standard markup (will add it if necessary)
-          return;
+        var $formGroup = $input.closest(".form-group"); // note that form-group may be grandparent in the case of an input-group
-        }
+        if($formGroup.length === 0){
-        $this.wrap("<div class=form-control-wrapper></div>");
+          $input.wrap("<div class='form-group'></div>");
-        $this.after("<span class=material-input></span>");
+          $formGroup = $input.closest(".form-group"); // find node after attached (otherwise additional attachments don't work)
-
-        // Add floating label if required
-        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>");
         }
 
-        // Add hint label if required
+        // Legacy - Add hint label if using the old shorthand data-hint attribute on the input
-        if ($this.attr("data-hint")) {
+        if ($input.attr("data-hint")) {
-          $this.after("<div class=hint>" + $this.attr("data-hint") + "</div>");
+          $input.after("<p class='help-block'>" + $input.attr("data-hint") + "</p>");
+          $input.removeAttr("data-hint");
+        }
+
+        // Legacy - Change input-sm/lg to form-group-sm/lg instead (preferred standard and simpler css/less variants)
+        var legacySizes = {
+          "input-lg": "form-group-lg",
+          "input-sm": "form-group-sm"
+        };
+        $.each( legacySizes, function( legacySize, standardSize ) {
+          if ($input.hasClass(legacySize)) {
+            $input.removeClass(legacySize);
+            $formGroup.addClass(standardSize);
+          }
+        });
+
+        // Legacy - Add label-floating if using old shorthand <input class="floating-label" placeholder="foo">
+        if ($input.hasClass("floating-label")) {
+          var placeholder = $input.attr("placeholder");
+          $input.attr("placeholder", null).removeClass("floating-label");
+          var id = $input.attr("id");
+          var forAttribute = "";
+          if(id) {
+            forAttribute = "for='" + id + "'";
+          }
+          $formGroup.addClass("label-floating");
+          $input.after("<label " + forAttribute + "class='control-label'>" + placeholder + "</label>");
         }
 
         // Set as empty if is empty (damn I must improve this...)
-        if ($this.val() === null || $this.val() == "undefined" || $this.val() === "") {
+        if ($input.val() === null || $input.val() == "undefined" || $input.val() === "") {
-          $this.addClass("empty");
+          $formGroup.addClass("is-empty");
         }
 
+          // Add at the end of the form-group
+        $formGroup.append("<span class='material-input'></span>");
+
         // Support for file input
-        if ($this.parent().next().is("[type=file]")) {
+        if ($formGroup.find("input[type=file]").length > 0) {
-          $this.parent().addClass("fileinput");
+          $formGroup.addClass("is-fileinput");
-          var $input = $this.parent().next().detach();
-          $this.after($input);
         }
       });
     },
@@ -108,36 +129,71 @@
       .on("change", ".checkbox input[type=checkbox]", function() { $(this).blur(); })
       .on("keydown paste", ".form-control", function(e) {
         if(_isChar(e)) {
-          $(this).removeClass("empty");
+          $(this).closest(".form-group").removeClass("is-empty");
         }
       })
       .on("keyup change", ".form-control", function() {
-        var $this = $(this);
+        var $input = $(this);
-        if ($this.val() === "" && (typeof $this[0].checkValidity === "undefined" || $this[0].checkValidity())) {
+        var $formGroup = $input.closest(".form-group");
-          $this.addClass("empty");
+        var isValid = (typeof $input[0].checkValidity === "undefined" || $input[0].checkValidity());
-        } else {
+
-          $this.removeClass("empty");
+        if ($input.val() === "" && isValid) {
+          $formGroup.addClass("is-empty");
+        }
+        else {
+          $formGroup.removeClass("is-empty");
+        }
+
+        // Validation events do not bubble, so they must be attached directly to the input: http://jsfiddle.net/PEpRM/1/
+        //  Further, even the bind method is being caught, but since we are already calling #checkValidity here, just alter
+        //  the form-group on change.
+        //
+        // NOTE: I'm not sure we should be intervening regarding validation, this seems better as a README and snippet of code.
+        //        BUT, I've left it here for backwards compatibility.
+        if(isValid){
+          $formGroup.removeClass("has-error");
+        }
+        else{
+          $formGroup.addClass("has-error");
         }
       })
-      .on("focus", ".form-control-wrapper.fileinput", function() {
+      .on("focus", ".form-control, .form-group.is-fileinput", function() {
-        $(this).find("input").addClass("focus");
+        $(this).closest(".form-group").addClass("is-focused"); // add class to form-group
       })
-      .on("blur", ".form-control-wrapper.fileinput", function() {
+      .on("blur", ".form-control, .form-group.is-fileinput", function() {
-        $(this).find("input").removeClass("focus");
+        $(this).closest(".form-group").removeClass("is-focused"); // remove class from form-group
       })
-      .on("change", ".form-control-wrapper.fileinput [type=file]", function() {
+      // make sure empty is added back when there is a programmatic value change.
-        var $this = $(this);
+      //  NOTE: programmatic changing of value using $.val() must trigger the change event i.e. $.val('x').trigger('change')
+      .on("change", ".form-group input", function() {
+        var $input = $(this);
+        if($input.attr("type") == "file") {
+          return;
+        }
+
+        var $formGroup = $input.closest(".form-group");
+        var value = $input.val();
+        if (value) {
+          $formGroup.removeClass("is-empty");
+        } else {
+          $formGroup.addClass("is-empty");
+        }
+      })
+      // set the fileinput readonly field with the name of the file
+      .on("change", ".form-group.is-fileinput input[type='file']", function() {
+        var $input = $(this);
+        var $formGroup = $input.closest(".form-group");
         var value = "";
         $.each(this.files, function(i, file) {
           value += file.name + ", ";
         });
         value = value.substring(0, value.length - 2);
         if (value) {
-          $this.prev().removeClass("empty");
+          $formGroup.removeClass("is-empty");
         } else {
-          $this.prev().addClass("empty");
+          $formGroup.addClass("is-empty");
         }
-        $this.prev().val(value);
+        $formGroup.find("input.form-control[readonly]").val(value);
       });
     },
     "ripples": function(selector) {
@@ -174,7 +230,7 @@
           });
         }, 100);
       })
-      .on("blur", "input", function() {
+      .on("blur", ".form-group input", function() {
         clearInterval(focused);
       });
     },

dist/js/material.min.js

@@ -1,2 +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&&9!=a.which:!1}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{input:!0,ripples:!0,checkbox:!0,togglebutton:!0,radio:!0,arrive:!0,autofill:!1,withRipples:[".btn:not(.btn-link)",".card-image",".navbar a:not(.withoutripple)",".dropdown-menu a",".nav-tabs a:not(.withoutripple)",".withripple",".pagination li:not(.active):not(.disabled) a:not(.withoutripple)"].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=checkbox-material><span class=check></span></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(b){a(b?b:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var b=a(this);if(b.attr("data-hint")||b.hasClass("floating-label")){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)}}})},attachInputEventHandlers:function(){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()||"undefined"!=typeof b[0].checkValidity&&!b[0].checkValidity()?b.removeClass("empty"):b.addClass("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(this),c="";a.each(this.files,function(a,b){c+=b.name+", "}),c=c.substring(0,c.length-2),c?b.prev().removeClass("empty"):b.prev().addClass("empty"),b.prev().val(c)})},ripples:function(b){a(b?b:this.options.withRipples).ripples()},autofill:function(){var b=setInterval(function(){a("input[type!=checkbox]").each(function(){var b=a(this);b.val()&&b.val()!==b.attr("value")&&b.trigger("change")})},100);setTimeout(function(){clearInterval(b)},1e4)},attachAutofillEventHandlers:function(){var b;a(document).on("focus","input",function(){var c=a(this).parents("form").find("input").not("[type=file]");b=setInterval(function(){c.each(function(){var b=a(this);b.val()!==b.attr("value")&&b.trigger("change")})},100)}).on("blur","input",function(){clearInterval(b)})},init:function(){var b=a(document);a.fn.ripples&&this.options.ripples&&this.ripples(),this.options.input&&(this.input(),this.attachInputEventHandlers()),this.options.checkbox&&this.checkbox(),this.options.togglebutton&&this.togglebutton(),this.options.radio&&this.radio(),this.options.autofill&&(this.autofill(),this.attachAutofillEventHandlers()),document.arrive&&this.options.arrive&&(a.fn.ripples&&this.options.ripples&&b.arrive(this.options.withRipples,function(){a.material.ripples(a(this))}),this.options.input&&b.arrive(this.options.inputElements,function(){a.material.input(a(this))}),this.options.checkbox&&b.arrive(this.options.checkboxElements,function(){a.material.checkbox(a(this))}),this.options.radio&&b.arrive(this.options.radioElements,function(){a.material.radio(a(this))}),this.options.togglebutton&&b.arrive(this.options.togglebuttonElements,function(){a.material.togglebutton(a(this))}))}}}(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&&9!=a.which:!1}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{input:!0,ripples:!0,checkbox:!0,togglebutton:!0,radio:!0,arrive:!0,autofill:!1,withRipples:[".btn:not(.btn-link)",".card-image",".navbar a:not(.withoutripple)",".dropdown-menu a",".nav-tabs a:not(.withoutripple)",".withripple",".pagination li:not(.active):not(.disabled) a:not(.withoutripple)"].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=checkbox-material><span class=check></span></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(b){a(b?b:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var b=a(this),c=b.closest(".form-group");0===c.length&&(b.wrap("<div class='form-group'></div>"),c=b.closest(".form-group")),b.attr("data-hint")&&(b.after("<p class='help-block'>"+b.attr("data-hint")+"</p>"),b.removeAttr("data-hint"));var d={"input-lg":"form-group-lg","input-sm":"form-group-sm"};if(a.each(d,function(a,d){b.hasClass(a)&&(b.removeClass(a),c.addClass(d))}),b.hasClass("floating-label")){var e=b.attr("placeholder");b.attr("placeholder",null).removeClass("floating-label");var f=b.attr("id"),g="";f&&(g="for='"+f+"'"),c.addClass("label-floating"),b.after("<label "+g+"class='control-label'>"+e+"</label>")}(null===b.val()||"undefined"==b.val()||""===b.val())&&c.addClass("is-empty"),c.append("<span class='material-input'></span>"),c.find("input[type=file]").length>0&&c.addClass("is-fileinput")})},attachInputEventHandlers:function(){a(document).on("change",".checkbox input[type=checkbox]",function(){a(this).blur()}).on("keydown paste",".form-control",function(c){b(c)&&a(this).closest(".form-group").removeClass("is-empty")}).on("keyup change",".form-control",function(){var b=a(this),c=b.closest(".form-group"),d="undefined"==typeof b[0].checkValidity||b[0].checkValidity();""===b.val()&&d?c.addClass("is-empty"):c.removeClass("is-empty"),d?c.removeClass("has-error"):c.addClass("has-error")}).on("focus",".form-control, .form-group.is-fileinput",function(){a(this).closest(".form-group").addClass("is-focused")}).on("blur",".form-control, .form-group.is-fileinput",function(){a(this).closest(".form-group").removeClass("is-focused")}).on("change",".form-group input",function(){var b=a(this);if("file"!=b.attr("type")){var c=b.closest(".form-group"),d=b.val();d?c.removeClass("is-empty"):c.addClass("is-empty")}}).on("change",".form-group.is-fileinput input[type='file']",function(){var b=a(this),c=b.closest(".form-group"),d="";a.each(this.files,function(a,b){d+=b.name+", "}),d=d.substring(0,d.length-2),d?c.removeClass("is-empty"):c.addClass("is-empty"),c.find("input.form-control[readonly]").val(d)})},ripples:function(b){a(b?b:this.options.withRipples).ripples()},autofill:function(){var b=setInterval(function(){a("input[type!=checkbox]").each(function(){var b=a(this);b.val()&&b.val()!==b.attr("value")&&b.trigger("change")})},100);setTimeout(function(){clearInterval(b)},1e4)},attachAutofillEventHandlers:function(){var b;a(document).on("focus","input",function(){var c=a(this).parents("form").find("input").not("[type=file]");b=setInterval(function(){c.each(function(){var b=a(this);b.val()!==b.attr("value")&&b.trigger("change")})},100)}).on("blur",".form-group input",function(){clearInterval(b)})},init:function(){var b=a(document);a.fn.ripples&&this.options.ripples&&this.ripples(),this.options.input&&(this.input(),this.attachInputEventHandlers()),this.options.checkbox&&this.checkbox(),this.options.togglebutton&&this.togglebutton(),this.options.radio&&this.radio(),this.options.autofill&&(this.autofill(),this.attachAutofillEventHandlers()),document.arrive&&this.options.arrive&&(a.fn.ripples&&this.options.ripples&&b.arrive(this.options.withRipples,function(){a.material.ripples(a(this))}),this.options.input&&b.arrive(this.options.inputElements,function(){a.material.input(a(this))}),this.options.checkbox&&b.arrive(this.options.checkboxElements,function(){a.material.checkbox(a(this))}),this.options.radio&&b.arrive(this.options.radioElements,function(){a.material.radio(a(this))}),this.options.togglebutton&&b.arrive(this.options.togglebuttonElements,function(){a.material.togglebutton(a(this))}))}}}(jQuery);
 //# sourceMappingURL=material.min.js.map

dist/js/material.min.js.map

@@ -1 +1 @@
-{"version":3,"sources":["material.js"],"names":["$","_isChar","evt","which","ctrlKey","metaKey","altKey","expr","notmdproc","obj","data","material","options","input","ripples","checkbox","togglebutton","radio","arrive","autofill","withRipples","join","inputElements","checkboxElements","togglebuttonElements","radioElements","selector","this","filter","after","each","$this","attr","hasClass","wrap","placeholder","removeClass","val","addClass","parent","next","is","$input","detach","attachInputEventHandlers","document","on","blur","e","checkValidity","find","value","files","i","file","name","substring","length","prev","loading","setInterval","trigger","setTimeout","clearInterval","attachAutofillEventHandlers","focused","$inputs","parents","not","init","$document","fn","jQuery"],"mappings":"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","file":"material.min.js"}
+{"version":3,"sources":["material.js"],"names":["$","_isChar","evt","which","ctrlKey","metaKey","altKey","expr","notmdproc","obj","data","material","options","input","ripples","checkbox","togglebutton","radio","arrive","autofill","withRipples","join","inputElements","checkboxElements","togglebuttonElements","radioElements","selector","this","filter","after","each","$input","$formGroup","closest","length","wrap","attr","removeAttr","legacySizes","input-lg","input-sm","legacySize","standardSize","hasClass","removeClass","addClass","placeholder","id","forAttribute","val","append","find","attachInputEventHandlers","document","on","blur","e","isValid","checkValidity","value","files","i","file","name","substring","loading","setInterval","$this","trigger","setTimeout","clearInterval","attachAutofillEventHandlers","focused","$inputs","parents","not","init","$document","fn","jQuery"],"mappings":"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","file":"material.min.js"}

dist/test.html

@@ -1,50 +0,0 @@
-<html>
-
-    <head>
-
-        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
-        <!-- Include roboto.css to use the Roboto web font, material.css to include the theme and ripples.css to style the ripple effect -->
-        <link href="css/roboto.min.css" rel="stylesheet">
-        <link href="css/material.min.css" rel="stylesheet">
-        <link href="css/ripples.min.css" rel="stylesheet">
-
-    </head>
-
-    <body>
-
-        <!-- Your site -->
-
-        <h1>You can add your site here.</h1>
-
-        <h2>To ensure that material-design theme is working, check out the buttons below.</h2>
-
-        <h3 class="text-muted">If you can see the ripple effect on clicking them, then you are good to go!</h3>
-
-
-        <p class="bs-component">
-            <a href="javascript:void(0)" class="btn btn-default">Default</a>
-            <a href="javascript:void(0)" class="btn btn-primary">Primary</a>
-            <a href="javascript:void(0)" class="btn btn-success">Success</a>
-            <a href="javascript:void(0)" class="btn btn-info">Info</a>
-            <a href="javascript:void(0)" class="btn btn-warning">Warning</a>
-            <a href="javascript:void(0)" class="btn btn-danger">Danger</a>
-            <a href="javascript:void(0)" class="btn btn-link">Link</a>
-        </p>
-
-        <!-- Your site ends -->
-
-        <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
-        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
-
-        <script src="js/ripples.min.js"></script>
-        <script src="js/material.min.js"></script>
-        <script>
-            $(document).ready(function() {
-                // This command is used to initialize some elements and make them work properly
-                $.material.init();
-            });
-        </script>
-
-    </body>
-
-</html>

index.css

@@ -0,0 +1,360 @@
+* {
+    box-sizing: border-box;
+}
+
+.header-panel {
+    background-color: #009587;
+    height: 144px;
+    position: relative;
+    z-index: 3;
+}
+
+.header-panel div {
+    position: relative;
+    height: 100%;
+}
+
+.header-panel h1 {
+    color: #FFF;
+    font-size: 20px;
+    font-weight: 400;
+    position: absolute;
+    bottom: 10px;
+    padding-left: 35px;
+}
+
+.menu {
+    overflow: auto;
+    padding: 0;
+}
+
+.menu, .menu * {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+}
+
+.menu ul {
+    padding: 0;
+    margin: 7px 0;
+}
+
+.menu ul li {
+    list-style: none;
+    padding: 20px 0 20px 50px;
+    font-size: 15px;
+    font-weight: normal;
+    cursor: pointer;
+}
+
+.menu ul li.active {
+    background-color: #dedede;
+    position: relative;
+}
+
+.menu ul li a {
+    color: rgb(51, 51, 51);
+    text-decoration: none;
+}
+
+.pages {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 4;
+    padding: 0;
+    overflow: auto;
+}
+
+.pages > div {
+    padding: 0 5px;
+    padding-top: 64px;
+}
+
+.pages .header {
+    color: rgb(82, 101, 162);
+    font-size: 24px;
+    font-weight: normal;
+    margin-top: 5px;
+    margin-bottom: 60px;
+    letter-spacing: 1.20000004768372px;
+}
+
+.page {
+    transform: translateY(1080px);
+    transition: transform 0 linear;
+    display: none;
+    opacity: 0;
+    font-size: 16px;
+}
+
+.page.active {
+    transform: translateY(0px);
+    transition: all 0.3s ease-out;
+    display: block;
+    opacity: 1;
+}
+
+.opensource {
+    color: rgba(0, 0, 0, 0.62);
+    position: fixed;
+    margin-top: 50px;
+    margin-left: 50px;
+    z-index: 100;
+}
+
+#source-modal h4 {
+    color: black;
+}
+
+#paypal .btn {
+    padding: 5px 30px 6px 30px;
+}
+
+#paypal input {
+    background: transparent;
+    border: 0;
+}
+
+.cbwrapper div {
+    display: none;
+}
+
+.cbwrapper div:nth-child(2) {
+    display: block;
+}
+
+#carbonads, #fakecb {
+    border: 1px solid #d5d5d5;
+    font-size: 11px;
+    line-height: 15px;
+    overflow: hidden;
+    width: 340px;
+    padding: 20px;
+    margin: auto;
+    height: 142px;
+    border-radius: 2px;
+}
+
+#carbonads .carbon-img {
+    float: left;
+    display: block;
+}
+
+#carbonads .carbon-text, #carbonads .carbon-poweredby {
+    float: left;
+    width: 150px;
+    padding: 0 10px 10px 10px;
+}
+
+#carbonads .carbon-text:hover, #carbonads .carbon-poweredby:hover {
+    text-decoration: none;
+}
+
+#carbonads .carbon-poweredby {
+    color: #9D9D9D;
+}
+
+#checkbox .sample1 label {
+    font-weight: bold;
+}
+
+#checkbox .hint {
+    padding-left: 45px;
+    padding-top: 20px;
+    font-weight: 400;
+}
+
+#checkbox .sample1 {
+    padding-bottom: 20px;
+}
+
+#checkbox h2 {
+    font-size: 18.7199993133545px;
+    font-weight: bold;
+    margin-bottom: 30px;
+}
+
+#checkbox .sample2 {
+    width: 300px;
+    clear: both;
+    font-weight: 400;
+}
+
+#checkbox .sample2 {
+    padding: 10px 0;
+}
+
+#checkbox .sample2 .text {
+    display: inline-block;
+}
+
+#checkbox .sample2 .checkbox {
+    float: right;
+    margin: 0;
+}
+
+/*#progress-bar h2 {*/
+    /*font-size: 18.7199993133545px;*/
+    /*font-weight: bold;*/
+    /*margin-bottom: 30px;*/
+/*}*/
+
+/*#dialog h2 {*/
+    /*padding: 14px;*/
+    /*margin: 0;*/
+    /*font-size: 16px;*/
+    /*font-weight: 400;*/
+/*}*/
+
+/*#shadow h2 {*/
+/*padding: 14px;*/
+/*margin: 0;*/
+/*font-size: 16px;*/
+/*font-weight: 400;*/
+/*}*/
+
+#shadow .sample {
+    width: 100px;
+    height: 100px;
+    margin: 16px;
+    padding: 16px;
+    display: inline-block;
+}
+
+#shadow-sample2 {
+    display: inline-block;
+    width: 100px;
+    height: 100px;
+    margin: 16px;
+    padding: 16px;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+
+}
+
+#shadow-sample3 {
+    display: inline-block;
+    width: 100px;
+    height: 100px;
+    margin: 16px;
+    padding: 16px;
+    border-radius: 100px;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+}
+
+/*#radio-button h2 {*/
+    /*font-size: 18.7199993133545px;*/
+    /*font-weight: bold;*/
+    /*margin-bottom: 30px;*/
+    /*margin-top: 50px;*/
+/*}*/
+
+#radio-button .radio {
+    margin: 20px 10px;
+}
+
+/*#input h2 {*/
+/*padding: 14px;*/
+/*font-size: 16px;*/
+/*font-weight: 400;*/
+/*}*/
+
+#input .inputs {
+    width: 80%;
+}
+
+/*#input .form-group {*/
+    /*margin: 30px 0;*/
+/*}*/
+
+#slider .sample1, #slider .sample2 {
+    padding: 20px 0;
+    background-color: #f0f0f0;
+    margin-bottom: 20px;
+}
+
+#slider .sample2 {
+    height: 150px;
+}
+
+#slider .sample2 .slider {
+    margin: 0 40px;
+}
+
+/*#slider h2 {*/
+/*padding: 14px;*/
+/*margin: 0;*/
+/*font-size: 16px;*/
+/*font-weight: 400;*/
+/*}*/
+
+#slider .slider {
+    margin: 15px;
+}
+
+/*#button h2 {*/
+/*padding: 14px;*/
+/*margin: 0;*/
+/*font-size: 16px;*/
+/*font-weight: 400;*/
+/*}*/
+
+#floating-action-button .btn {
+    margin: 20px;
+}
+
+/*#floating-action-button h2 {*/
+/*padding: 14px;*/
+/*margin: 0;*/
+/*font-size: 16px;*/
+/*font-weight: 400;*/
+/*}*/
+
+/*#dropdown h2 {*/
+/*padding: 14px;*/
+/*margin: 0;*/
+/*font-size: 16px;*/
+/*font-weight: 400;*/
+/*}*/
+
+#dropdown .dropdown {
+    font-size: 30px;
+    padding: 20px;
+}
+
+/*#dropdown-menu h2 {*/
+/*padding: 14px;*/
+/*margin: 0;*/
+/*font-size: 16px;*/
+/*font-weight: 400;*/
+/*}*/
+
+#dropdown-menu .sample {
+    width: 200px;
+}
+
+#dropdown-menu .form-group {
+    margin: 30px 0;
+}
+
+/*#toggle-button h2 {*/
+    /*font-size: 18.7199993133545px;*/
+    /*font-weight: bold;*/
+    /*margin-bottom: 30px;*/
+    /*margin-top: 50px;*/
+/*}*/
+
+#toggle-button .togglebutton label {
+    margin: 20px 10px;
+    width: 200px;
+}
+
+#toggle-button .togglebutton .toggle {
+    float: right;
+}

less/_buttons.less

@@ -54,7 +54,8 @@
 
 }
 
-.btn {
+.btn,
+.input-group-btn .btn {
   &.btn-flat {
     background: none;
     box-shadow: none;
@@ -92,7 +93,8 @@
     &:active {
       .shadow-z-1-hover();
     }
-    &, .ripple-wrapper {
+    &,
+    .ripple-wrapper {
       border-radius: 100%;
     }
     &.btn-fab-mini {

less/_checkboxes.less

@@ -1,10 +1,38 @@
+// http://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox
 .form-horizontal .checkbox {
   padding-top: 20px;
 }
+
+.form-group-checkbox-variant(@placeholder-font-size, @line-height){
+  .checkbox {
+    label {
+      font-size: @placeholder-font-size;
+      line-height: @line-height;
+      font-weight: normal;
+    }
+  }
+}
+
+.form-group {
+
+  // default label size/location
+  .form-group-checkbox-variant(@md-input-font-size-base, @md-input-line-height-base);
+
+  // sm label size/location
+  &.form-group-sm {
+    .form-group-checkbox-variant(@md-input-font-size-small, @md-input-line-height-small);
+  }
+
+  // lg label size/location
+  &.form-group-lg {
+    .form-group-checkbox-variant(@md-input-font-size-large, @md-input-line-height-large);
+  }
+
   .checkbox {
     label {
       cursor: pointer;
       padding-left: 0; // Reset for Bootstrap rule
+      color: @checkbox-label-color;
     }
 
     // Hide native checkbox
@@ -24,7 +52,7 @@
       vertical-align: middle;
       position: relative;
       top: 3px;
-    &:before {
+      &:before {  // FIXME: document why this is necessary (doesn't seem to be on chrome)
         display: block;
         position: absolute;
         left: 0;
@@ -44,7 +72,7 @@
         display: inline-block;
         width: @checkbox-size;
         height: @checkbox-size;
-      border: 2px solid;
+        border: 2px solid @checkbox-border-color;
         border-radius: 2px;
         overflow: hidden;
         z-index: 1;
@@ -100,7 +128,10 @@
     }
 
     // Style for disabled inputs
+    fieldset[disabled] &,
+    fieldset[disabled] & input[type=checkbox],
     input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
+    input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check,
     input[type=checkbox][disabled] + .circle {
       opacity: 0.5;
     }
@@ -110,10 +141,11 @@
     }
 
     .variations(~" input[type=checkbox]:checked + .checkbox-material .check:after", background-color, @success);
-  .variations(~" input[type=checkbox]:checked + .checkbox-material .check:before", color, #4caf50);
+    .variations(~" input[type=checkbox]:checked + .checkbox-material .check:before", color, @checkbox-checked-color);
-  .variations(~" input[type=checkbox]:checked + .checkbox-material .check", color, #4caf50);
+    .variations(~" input[type=checkbox]:checked + .checkbox-material .check", color, @checkbox-checked-color);
+    .variations(~" input[type=checkbox]:checked + .checkbox-material .check", border-color, @checkbox-checked-color);
+  }
 }
-
 
 @keyframes checkbox-on {
   0% {

less/_inputs-size.less

@@ -0,0 +1,218 @@
+//
+// Forms - sizing - material - mirrors bootstrap/forms.less with custom sizing
+//
+// NOTE: this is intentionally kept structurally _identical_ to the bootstrap/forms.less file to make it easier
+//        to identify differences in sizing approaches to form inputs.
+// --------------------------------------------------
+
+legend {
+  margin-bottom: @md-input-line-height-computed;
+  font-size: (@md-input-font-size-base * 1.5);
+}
+
+// Adjust output element
+output {
+  padding-top: (@md-input-padding-base-vertical + 1);
+  font-size: @md-input-font-size-base;
+  line-height: @md-input-line-height-base;
+}
+
+.form-control {
+  height: @md-input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+  padding: @md-input-padding-base-vertical @md-input-padding-base-horizontal;
+  font-size: @md-input-font-size-base;
+  line-height: @md-input-line-height-base;
+}
+
+// Special styles for iOS temporal inputs
+//
+// In Mobile Safari, setting `display: block` on temporal inputs causes the
+// text within the input to become vertically misaligned. As a workaround, we
+// set a pixel line-height that matches the given height of the input, but only
+// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
+//
+// Note that as of 8.3, iOS doesn't support `datetime` or `week`.
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  input[type="date"],
+  input[type="time"],
+  input[type="datetime-local"],
+  input[type="month"] {
+    &.form-control {
+      line-height: @md-input-height-base;
+    }
+
+    &.input-sm,
+    .input-group-sm & {
+      line-height: @md-input-height-small;
+    }
+
+    &.input-lg,
+    .input-group-lg & {
+      line-height: @md-input-height-large;
+    }
+  }
+}
+
+.radio,
+.checkbox {
+
+  label {
+    min-height: @md-input-line-height-computed; // Ensure the input doesn't jump when there is no text
+  }
+}
+
+
+// Static form control text
+//
+// Apply class to a `p` element to make any string of text align with labels in
+// a horizontal form layout.
+
+.form-control-static {
+  // Size it appropriately next to real form controls
+  padding-top: (@md-input-padding-base-vertical + 1);
+  padding-bottom: (@md-input-padding-base-vertical + 1);
+  min-height: (@md-input-line-height-computed + @md-input-font-size-base);
+}
+
+
+// Form control sizing
+//
+// Relative text size, padding, and border-radii changes for form controls. For
+// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
+// element gets special love because it's special, and that's a fact!
+
+// mixin pulled from bootstrap and altered for less/sass compatibility
+.input-size(@parent, @input-height, @padding-vertical, @padding-horizontal, @font-size, @line-height, @border-radius) {
+
+  @{parent} {
+    height: @input-height;
+    padding: @padding-vertical @padding-horizontal;
+    font-size: @font-size;
+    line-height: @line-height;
+    border-radius: @border-radius;
+  }
+
+  select@{parent} {
+    height: @input-height;
+    line-height: @input-height;
+  }
+
+  textarea@{parent},
+  select[multiple]@{parent} {
+    height: auto;
+  }
+}
+
+
+
+// Form control sizing
+//
+// Build on `.form-control` with modifier classes to decrease or increase the
+// height and font-size of form controls.
+//
+// The `.form-group-* form-control` variations are sadly duplicated to avoid the
+// issue documented in https://github.com/twbs/bootstrap/issues/15074.
+.input-sm {
+  .input-size('.input-sm', @md-input-height-small, @md-input-padding-small-vertical, @md-input-padding-small-horizontal, @md-input-font-size-small, @md-input-line-height-small, @md-input-border-radius-small);
+}
+.form-group-sm {
+  .form-control {
+    height: @md-input-height-small;
+    padding: @md-input-padding-small-vertical @md-input-padding-small-horizontal;
+    font-size: @md-input-font-size-small;
+    line-height: @md-input-line-height-small;
+  }
+  select.form-control {
+    height: @md-input-height-small;
+    line-height: @md-input-height-small;
+  }
+  textarea.form-control,
+  select[multiple].form-control {
+    height: auto;
+  }
+  .form-control-static {
+    height: @md-input-height-small;
+    min-height: (@md-input-line-height-computed + @md-input-font-size-small);
+    padding: (@md-input-padding-small-vertical + 1) @md-input-padding-small-horizontal;
+    font-size: @md-input-font-size-small;
+    line-height: @md-input-line-height-small;
+  }
+}
+
+.input-lg {
+  .input-size('.input-lg', @md-input-height-large, @md-input-padding-large-vertical, @md-input-padding-large-horizontal, @md-input-font-size-large, @md-input-line-height-large, @md-input-border-radius-large);
+}
+.form-group-lg {
+  .form-control {
+    height: @md-input-height-large;
+    padding: @md-input-padding-large-vertical @md-input-padding-large-horizontal;
+    font-size: @md-input-font-size-large;
+    line-height: @md-input-line-height-large;
+  }
+  select.form-control {
+    height: @md-input-height-large;
+    line-height: @md-input-height-large;
+  }
+  textarea.form-control,
+  select[multiple].form-control {
+    height: auto;
+  }
+  .form-control-static {
+    height: @md-input-height-large;
+    min-height: (@md-input-line-height-computed + @md-input-font-size-large);
+    padding: (@md-input-padding-large-vertical + 1) @md-input-padding-large-horizontal;
+    font-size: @md-input-font-size-large;
+    line-height: @md-input-line-height-large;
+  }
+}
+
+
+.form-horizontal {
+
+  // Consistent vertical alignment of radios and checkboxes
+  //
+  // Labels also get some reset styles, but that is scoped to a media query below.
+  .radio,
+  .checkbox,
+  .radio-inline,
+  .checkbox-inline {
+    padding-top: (@md-input-padding-base-vertical + 1); // Default padding plus a border
+  }
+  // Account for padding we're adding to ensure the alignment and of help text
+  // and other content below items
+  .radio,
+  .checkbox {
+    min-height: (@md-input-line-height-computed + (@md-input-padding-base-vertical + 1));
+  }
+
+  // Reset spacing and right align labels, but scope to media queries so that
+  // labels on narrow viewports stack the same as a default form example.
+  @media (min-width: @screen-sm-min) {
+    .control-label {
+      padding-top: (@md-input-padding-base-vertical + 1); // Default padding plus a border
+    }
+  }
+
+
+  // Form group sizes
+  //
+  // Quick utility class for applying `.input-lg` and `.input-sm` styles to the
+  // inputs and labels within a `.form-group`.
+  .form-group-lg {
+    @media (min-width: @screen-sm-min) {
+      .control-label {
+        padding-top: ((@md-input-padding-large-vertical * @md-input-line-height-large) + 1);
+        font-size: @md-input-font-size-large;
+      }
+    }
+  }
+  .form-group-sm {
+    @media (min-width: @screen-sm-min) {
+      .control-label {
+        padding-top: (@md-input-padding-small-vertical + 1);
+        font-size: @md-input-font-size-small;
+      }
+    }
+  }
+}

less/_inputs.less

@@ -1,241 +1,285 @@
-fieldset[disabled] .form-control, .form-control {
+@import '_inputs-size.less';
-  &, &:focus, &.focus {
+
-    padding: 0;
+// usage: .form-group-validation-state(@input-danger);
-    float: none;
+.form-group-validation-state(@name, @color) {
-    border: 0;
+
+  &.@{name} { // e.g. has-error
+    .form-control {
       box-shadow: none;
-    border-radius: 0;
+    }
-    &:disabled {
+    &.is-focused .form-control {
-      border-style: dashed;
+      background-image: linear-gradient(@color, @color), linear-gradient(@input-underline-color, @input-underline-color);
-      border-bottom: 1px solid #757575;
+    }
+    label.control-label,
+    .help-block {
+      color: @color;
     }
   }
 }
 
-fieldset[disabled] .form-control, .form-control {
+.form-group-size-variant(@placeholder-font-size, @label-top-margin, @vertical-padding, @line-height, @label-as-placeholder-shim){
-  &:textarea {
+  @static-font-size: ceil((@label-floating-size-ratio * @placeholder-font-size));
-    height: 40px;
+  @static-line-height: (@label-floating-size-ratio * @line-height);
+
+  @label-as-placeholder-top: -1 * (@vertical-padding + @label-as-placeholder-shim);
+  @label-top: @label-as-placeholder-top - (@placeholder-font-size + @vertical-padding);
+
+  @help-block-font-size: ceil((@help-block-size-ratio * @placeholder-font-size));
+  @help-block-line-height: (@help-block-size-ratio * @line-height);
+
+  // form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned
+  margin: (@label-top-margin + @static-font-size) 0 0 0;
+
+  .form-control {
+    .material-placeholder({
+      font-size: @placeholder-font-size;
+    });
+    margin-bottom: @vertical-padding; // must be specified to give help-block vertical space
+  }
+
+  // upon collapsing margins, the largest margin is honored which collapses the form-control margin, so the form-control margin
+  //  must also be expressed as form-group padding
+  padding-bottom: @vertical-padding;
+
+  .help-block {
+    margin-top: 0px; // allow the input margin to set-off the top of the help-block
+    font-size: @help-block-font-size;
+  }
+
+  // smaller focused or static size
+  label.control-label {
+    font-size: @static-font-size;
+    line-height: @static-line-height;
+  }
+
+  // larger labels as placeholders
+  &.label-floating,
+  &.label-placeholder {
+    label.control-label {
+      top: @label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
+      font-size: @placeholder-font-size;
+      line-height: @line-height;
     }
   }
 
-select[multiple].form-control {
+  // static or focused floating labels
-  &, &:focus, &.focus {
+  &.label-static,
-    height: 85px;
+  &.label-floating.is-focused,
+  &.label-floating:not(.is-empty) {
+    label.control-label {
+      top: @label-top;
+      left: 0;
+      // must repeat because the selector above is more specific than the general label sizing
+      font-size: @static-font-size;
+      line-height: @static-line-height;
+    }
   }
 }
 
+.form-group {
+  //border: solid 1px red;
+  position: relative;
+
+  // -----
+  // Inputs
+  //
+  // Reference http://www.google.com/design/spec/components/text-fields.html
+  // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
   .form-control {
     border: 0;
     background-image: linear-gradient(@primary, @primary), linear-gradient(@input-underline-color, @input-underline-color);
     background-size: 0 2px, 100% 1px;
     background-repeat: no-repeat;
     background-position: center bottom, center calc(~"100% - 1px");
-  background-color: transparent;
     background-color: rgba(0, 0, 0, 0);
     transition: background 0s ease-out;
-  &::-webkit-input-placeholder {
+    float: none;
+    box-shadow: none;
+    border-radius: 0;
+
+    // Placeholders and and labels-as-placeholders should look the same
+    .material-placeholder({
       color: @input-placeholder-color;
-  }
+      font-weight: normal;
-  &::-moz-placeholder {
+    });
-    color: @input-placeholder-color; 
+
-  }
+
-  &:-ms-input-placeholder {  
+    //&:textarea {    // appears to be an invalid selector
-    color: @input-placeholder-color;
+    //  height: 40px;
-  }
+    //}
-}
+
-.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
+    &[readonly],
-  background-color: transparent;
+    &[disabled],
+    fieldset[disabled] & {
       background-color: rgba(0, 0, 0, 0);
     }
-fieldset[disabled] .form-control:disabled, 
+
-.form-control-wrapper .form-control:disabled, 
+    &[disabled],
-.form-control:disabled, 
+    fieldset[disabled] & {
-fieldset[disabled] .form-control:focus:disabled, 
+      background-image: none;
-.form-control-wrapper .form-control:focus:disabled, 
+      border-bottom: 1px dotted @input-underline-color;
-.form-control:focus:disabled, 
+    }
-fieldset[disabled] .form-control.focus:disabled, 
-.form-control-wrapper .form-control.focus:disabled, 
-.form-control.focus:disabled {
-  border: 0; // Ugly override of Bootstrap border
   }
 
-.form-control:focus, .form-control.focus {
+  &.is-focused .form-control {
     outline: none;
     background-image: linear-gradient(@primary, @primary), linear-gradient(@input-underline-color, @input-underline-color);
     background-size: 100% 2px, 100% 1px;
     box-shadow: none;
     transition-duration: 0.3s;
-}
 
-
+    .material-input:after {
-.form-control-wrapper {
-  position: relative;
-
-  .floating-label {
-    color: @input-placeholder-color;
-    position: absolute;
-    pointer-events: none;
-    left: 0px;
-    top: 5px;
-    transition: 0.3s ease all;
-  }
-
-  // Input sizes
-  .floating-label { // base
-    font-size: @font-size-base;
-  }
-  .form-control:focus ~ .floating-label,
-  .form-control:not(.empty) ~ .floating-label {
-    top: @floating-label-size-ratio * -@font-size-base;
-    font-size: @floating-label-size-ratio * @font-size-base;
-  }
-
-  .input-sm + .floating-label { // small
-    font-size: @font-size-small;
-    top: 7px;
-  }
-  .form-control.input-sm:focus ~ .floating-label,
-  .form-control.input-sm:not(.empty) ~.floating-label {
-    top: @floating-label-size-ratio * -@font-size-small;
-    font-size: @floating-label-size-ratio * @font-size-small;
-  }
-
-  .input-lg + .floating-label {
-    font-size: @font-size-large;
-    top: 10px;
-  }
-  .form-control.input-lg:focus ~ .floating-label,
-  .form-control.input-lg:not(.empty) ~ .floating-label {
-    top: @floating-label-size-ratio * -@font-size-large;
-    font-size: @floating-label-size-ratio * @font-size-large;
-  }
-
-  .form-control:focus ~ .floating-label {
-    color: @primary;
-  }
-  .form-control:not(.empty):invalid ~ .floating-label, .form-control.focus:invalid ~ .floating-label {
-    color: @input-danger;
-  }
-  .form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after {
       background-color: @input-default;
     }
-  .form-control:invalid {
-    background-image: linear-gradient(@input-danger, @input-danger), linear-gradient(@input-underline-color, @input-underline-color);
-  }
-  textarea { resize: none; }
-  textarea ~ .form-control-highlight {
-    margin-top: -11px;
   }
 
-  // Hints
+  // -----
-  .hint {
+  // Labels
+  //
+  // Reference http://www.google.com/design/spec/components/text-fields.html
+  // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
+  &.label-static,
+  &.label-placeholder,
+  &.label-floating {
+
+    label.control-label {
       position: absolute;
-    font-size: 80%;
+      pointer-events: none;
+      transition: 0.3s ease all;
+    }
+  }
+
+  label.control-label {
+    // same label properties as form-group placeholder
+    color: @input-placeholder-color;
+    font-weight: normal;
+    margin: 16px 0 0 0; // std and lg
+  }
+
+  // hide label-placeholders when the field is not empty
+  &.label-placeholder:not(.is-empty){
+    label.control-label{
       display: none;
     }
-  .form-control:focus ~ .hint, .form-control.focus ~ .hint {
+  }
+
+  .variations(~" label.control-label", color, @input-placeholder-color);  // default label color variations
+  .variations(~".is-focused label.control-label", color, @input-default); // focused label color variations
+  .variations(~".is-focused.label-placeholder label.control-label", color, @input-placeholder-color);  // default label color variations
+
+  // default floating size/location
+  .form-group-size-variant(@md-input-font-size-base, @md-label-top-margin-base, @md-input-padding-base-vertical, @md-input-line-height-base, @md-label-as-placeholder-shim-base);
+
+  // sm floating size/location
+  &.form-group-sm {
+    .form-group-size-variant(@md-input-font-size-small, @md-label-top-margin-small, @md-input-padding-small-vertical, @md-input-line-height-small, @md-label-as-placeholder-shim-small);
+  }
+
+  // lg floating size/location
+  &.form-group-lg {
+    .form-group-size-variant(@md-input-font-size-large, @md-label-top-margin-large, @md-input-padding-large-vertical, @md-input-line-height-large, @md-label-as-placeholder-shim-large);
+  }
+
+  // Hints - position: absolute approach - uses no vertical space, text wrapping - not so good.
+  .help-block {
+    position: absolute; // do not use position: absolute because width/wrapping isn't automatic and overflows occur
+    display: none;
+  }
+
+  &.is-focused {
+    .help-block {
       display: block;
     }
-
-  select ~ .material-input:after {
-    display: none;
   }
 
-  // Fix for OS X
-  select {
-    appearance: none;
-  }
-
-}
-
-.form-group {
-  &.has-warning {
-    .form-control {
-      box-shadow: none;
-    }
-    .material-input:focus, .form-control:focus, .form-control.focus {
-      background-image: linear-gradient(@input-warning, @input-warning), linear-gradient(@input-underline-color, @input-underline-color);
-      box-shadow: none;
-    }
-    .control-label, input.form-control:focus ~ .floating-label {
-      color: @input-warning;
-    }
-  }
-  &.has-error {
-    .form-control {
-      box-shadow: none;
-    }
-    .material-input:focus, .form-control:focus, .form-control.focus {
-      background-image: linear-gradient(@input-danger, @input-danger), linear-gradient(@input-underline-color, @input-underline-color);
-      box-shadow: none;
-    }
-    .control-label, input.form-control:focus ~ .floating-label {
-      color: @input-danger;
-    }
-  }
-  &.has-success {
-    .form-control {
-      box-shadow: none;
-    }
-    .material-input:focus, .form-control:focus, .form-control.focus {
-      background-image: linear-gradient(@input-success, @input-success), linear-gradient(@input-underline-color, @input-underline-color);
-      box-shadow: none;
-    }
-    .control-label, input.form-control:focus ~ .floating-label {
-      color: @input-success;
-    }
-  }
-  &.has-info {
-    .form-control {
-      box-shadow: none;
-    }
-    .material-input:focus, .form-control:focus, .form-control.focus {
-      background-image: linear-gradient(@input-info, @input-info), linear-gradient(@input-underline-color, @input-underline-color);
-      box-shadow: none;
-    }
-    .control-label, input.form-control:focus ~ .floating-label {
-      color: @input-info;
-    }
-  }
   // SASS conversion note: please mirror any content change in _mixins-shared.scss bg-img-variations-content
-  .generic-variations(~" .form-control:focus", @primary, {
+  .generic-variations(~".is-focused .form-control", @primary, {
     background-image: linear-gradient(@material-color, @material-color), linear-gradient(@input-underline-color, @input-underline-color);
   });
-  .variations(~" .control-label", color, @lightbg-text);
-  .variations(~" input.form-control:focus ~ .floating-label", color, @input-default);
 
+  .form-group-validation-state(has-warning, @input-warning);
+  .form-group-validation-state(has-error, @input-danger);
+  .form-group-validation-state(has-success, @input-success);
+  .form-group-validation-state(has-info, @input-info);
+
+  textarea {
+    resize: none;
+    & ~ .form-control-highlight {
+      margin-top: -11px;
+    }
   }
 
-.input-group {
+  select {
-  .form-control-wrapper {
+    appearance: none; // Fix for OS X
-    .form-control {
+
-      float: none;
+    & ~ .material-input:after {
+      display: none;
     }
-    margin-right: 5px;
-    margin-left: 5px;
-  }
-  .input-group-addon {
-    border: 0;
-    background: transparent;
-  }
-  .input-group-btn .btn {
-    border-radius: 4px;
-    margin: 0;
   }
 }
 
 select.form-control {
+
   border: 0;
   box-shadow: none;
   border-radius: 0;
-  &:focus, &.focus {
+
+  .form-group.is-focused & {
     box-shadow: none;
-    border-color: #757575;
+    border-color: @input-underline-color;
+  }
+
+  &[multiple] {
+    &,
+    .form-group.is-focused & {
+      height: 85px;
+    }
   }
 }
 
-// Input files (kinda hack)
+.input-group-button-variation(@vertical-padding) {
-.form-control-wrapper input[type=file] {
+  .input-group-btn {
+    .btn {
+      margin: 0 0 @vertical-padding 0;
+    }
+  }
+}
+
+// ----------------
+// input group/addon related styles
+
+// default margin
+.input-group-button-variation(@md-input-padding-base-vertical);
+
+.form-group {
+  //.form-control {
+  //  float: none;
+  //}
+
+  // sm margin
+  &.form-group-sm {
+    .input-group-button-variation(@md-input-padding-small-vertical);
+  }
+
+  // lg margin
+  &.form-group-lg {
+    .input-group-button-variation(@md-input-padding-large-vertical);
+  }
+}
+
+.input-group {  // may be in or outside of form-group
+  .input-group-btn {
+    padding: 0 12px; // match addon spacing
+  }
+
+  .input-group-addon {
+    border: 0;
+    background: transparent;
+  }
+}
+
+// Input files - hide actual input - requires specific markup in the sample.
+.form-group input[type=file] {
   opacity: 0;
   position: absolute;
   top: 0;
@@ -246,3 +290,4 @@ select.form-control {
   height: 100%;
   z-index: 100;
 }
+

less/_mixins-fullpalette.less

@@ -1,27 +1,4 @@
-// usage: .variations(~" .check", color, transparent);
+@import '_mixins-shared.less';
-.variations(@extra, @property, @default) {
-  .generic-variations(@extra, @default, {
-    @{property}: @material-color;
-  });
-}
-
-.background-variations(@extra, @default) {
-  .generic-variations(@extra, @default, {
-    background-color: @material-color;
-    & when (@material-color = @btn-default) {
-      color: @lightbg-text;
-    }
-    & when not (@material-color = @btn-default) {
-      color: @material-text-color;
-    }
-  });
-}
-
-.text-variations(@extra, @default) {
-  .generic-variations(@extra, @default, {
-    color: @material-color;
-  });
-}
 
 //
 // To use this mixin you should pass a function as final parameter to define

less/_mixins-shared.less

@@ -0,0 +1,31 @@
+// Placeholder text
+.material-placeholder(@rules) {
+  &::-moz-placeholder { @rules(); } // Firefox
+  &:-ms-input-placeholder { @rules(); } // Internet Explorer 10+
+  &::-webkit-input-placeholder  { @rules(); } // Safari and Chrome
+}
+
+// usage: .variations(~" .check", color, transparent);
+.variations(@extra, @property, @default) {
+  .generic-variations(@extra, @default, {
+    @{property}: @material-color;
+  });
+}
+
+.background-variations(@extra, @default) {
+  .generic-variations(@extra, @default, {
+    background-color: @material-color;
+    & when (@material-color = @btn-default) {
+      color: @lightbg-text;
+    }
+    & when not (@material-color = @btn-default) {
+      color: @material-text-color;
+    }
+  });
+}
+
+.text-variations(@extra, @default) {
+  .generic-variations(@extra, @default, {
+    color: @material-color;
+  });
+}

less/_mixins.less

@@ -1,27 +1,4 @@
-// usage: .variations(~" .check", color, transparent);
+@import '_mixins-shared.less';
-.variations(@extra, @property, @default) {
-  .generic-variations(@extra, @default, {
-    @{property}: @material-color;
-  });
-}
-
-.background-variations(@extra, @default) {
-  .generic-variations(@extra, @default, {
-    background-color: @material-color;
-    & when (@material-color = @btn-default) {
-      color: @lightbg-text;
-    }
-    & when not (@material-color = @btn-default) {
-      color: @material-text-color;
-    }
-  });
-}
-
-.text-variations(@extra, @default) {
-  .generic-variations(@extra, @default, {
-    color: @material-color;
-  });
-}
 
 //
 // To use this mixin you should pass a function as final parameter to define

less/_navbar.less

@@ -155,15 +155,33 @@
 
   .navbar-form {
     margin-top: 16px;
-    .form-control-wrapper .form-control, .form-control {
+    .form-group {
-      border-color: inherit;
+      margin: 0;
-      color: inherit;
+      padding: 0;
-    }
+
-    .form-control-wrapper {
+      .material-input:before,
-      .material-input:before, input:focus ~ .material-input:after {
+      &.is-focused .material-input:after {
         background-color: inherit;
       }
     }
+
+    .form-group .form-control,
+    .form-control {
+      border-color: inherit;
+      color: inherit;
+      padding: 0;
+      margin: 0;
+
+      // re-normalize inputs in a navbar the size of standard bootstrap since our normal inputs are larger by spec than bootstrap
+      //---
+      //height: @input-height-base;
+      @bs-line-height-base: 1.428571429;
+      @bs-line-height-computed:    floor((@font-size-base * @bs-line-height-base)); // ~20px
+      height: (@bs-line-height-computed + 8px);
+      font-size: @font-size-base;
+      line-height: @bs-line-height-base;
+      //---
+    }
   }
 
   // SASS conversion note: please mirror any content change in _mixins-shared.scss navbar-variations-content
@@ -171,7 +189,7 @@
     background-color: @material-color;
     color: @material-text-color;
     // deeply defined to override welljumbo class without !impotant need
-    .navbar-form .form-control-wrapper input.form-control::placeholder, .navbar-form input.form-control::placeholder {
+    .navbar-form .form-group input.form-control::placeholder, .navbar-form input.form-control::placeholder {
       color: @material-text-color;
     }
     .dropdown-menu {

less/_plugin-selectize.less

@@ -37,7 +37,7 @@
             border: 0px;
             background: transparent;
         }
-        &.floating-label-fix input {
+        &.label-floating-fix input {
             opacity: 0;
         }
         > div, > .item {

less/_radios.less

@@ -1,11 +1,40 @@
 .form-horizontal .radio {
   margin-bottom: 10px;
 }
+
+.form-group-radio-variant(@placeholder-font-size, @line-height){
+  .radio {
+    label {
+      font-size: @placeholder-font-size;
+      line-height: @line-height;
+      font-weight: normal;
+    }
+  }
+}
+
+.form-group {
+
+  // default label size/location
+  .form-group-radio-variant(@md-input-font-size-base, @md-input-line-height-base);
+
+  // sm label size/location
+  &.form-group-sm {
+    .form-group-radio-variant(@md-input-font-size-small, @md-input-line-height-small);
+  }
+
+  // lg label size/location
+  &.form-group-lg {
+    .form-group-radio-variant(@md-input-font-size-large, @md-input-line-height-large);
+  }     
+}
+
 .radio {
   label {
     cursor: pointer;
     padding-left: 45px;
     position: relative;
+    color: @radio-label-color;
+
     span {
       display: block;
       position: absolute;
@@ -14,7 +43,7 @@
       transition-duration: 0.2s;
     }
     .circle {
-      border: 2px solid @lightbg-text;
+      border: 2px solid @radio-border-color;
       height: 15px;
       width: 15px;
       border-radius: 100%;
@@ -72,7 +101,6 @@
   input[type=radio][disabled] ~ .check {
     background-color: @lightbg-text;
   }
-
 }
 
 @keyframes rippleOn {

less/_togglebutton.less

@@ -1,11 +1,37 @@
+.form-group-toggle-variant(@placeholder-font-size, @line-height){
+  .togglebutton {
+    label {
+      font-size: @placeholder-font-size;
+      line-height: @line-height;
+      font-weight: normal;
+    }
+  }
+}
+
+.form-group {
+
+  // default label size/location
+  .form-group-toggle-variant(@md-input-font-size-base, @md-input-line-height-base);
+
+  // sm label size/location
+  &.form-group-sm {
+    .form-group-toggle-variant(@md-input-font-size-small, @md-input-line-height-small);
+  }
+
+  // lg label size/location
+  &.form-group-lg {
+    .form-group-toggle-variant(@md-input-font-size-large, @md-input-line-height-large);
+  }
+
   .togglebutton {
     vertical-align: middle;
     &, label, input, .toggle {
       user-select: none;
     }
     label {
-    font-weight: 400;
       cursor: pointer;
+      color: @togglebutton-label-color;
+
       // Hide original checkbox
       input[type=checkbox] {
         opacity: 0;
@@ -67,3 +93,4 @@
       box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px fade(@material-color, 10%);
     });
   }
+}

less/_variables.less

@@ -74,10 +74,70 @@
 @font-size-large: ceil((@font-size-base * 1.25)); // ~18px
 @font-size-small: ceil((@font-size-base * 0.85)); // ~12px
 
+@screen-sm:                  768px;
+@screen-sm-min:              @screen-sm;
+
+
 // Global Material variables
 @material-border-radius: 2px;
+
+// --------------------
+// inputs
+@input-placeholder-color: #BDBDBD;
+@label-floating-size-ratio: 75 / 100;
+@help-block-size-ratio: 75 / 100;
 @input-underline-color: #D2D2D2;
 
+@md-input-font-size-base: 16px;
+@md-input-font-size-large: ceil((@font-size-base * 1.25)); // ~20px
+@md-input-font-size-small: ceil((@font-size-base * 0.75)); // ~12px
+
+// size when static or floating with focus i.e. 16px
+//@md-input-label-font-size-base: ceil((@label-floating-size-ratio * @md-input-font-size-base));
+//@md-input-label-font-size-small:ceil(( @label-floating-size-ratio * @md-input-font-size-small));
+//@md-input-label-font-size-large: ceil((@label-floating-size-ratio * @md-input-font-size-large));
+
+//** Unit-less `line-height` for use in components like buttons.
+@md-input-line-height-base:        1.428571429; // 20/14
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+@md-input-line-height-computed:    floor((@md-input-font-size-base * @md-input-line-height-base)); // ~20px
+@md-input-line-height-large:         1.3333333; // extra decimals for Win 8.1 Chrome
+@md-input-line-height-small:         1.5;
+
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+@md-input-padding-base-vertical:     8px - 1px; // was 6.
+@md-input-padding-base-horizontal:   0px; // was 12.
+@md-label-as-placeholder-shim-base:  0px; // manual adjustment of label top when positioned as placeholder
+@md-label-top-margin-base:           16px;
+
+@md-input-padding-large-vertical:    10px - 1px; // 10
+@md-input-padding-large-horizontal:  0px;  // 16
+@md-label-as-placeholder-shim-large: -4px; // manual adjustment of label top when positioned as placeholder
+@md-label-top-margin-large:          16px;
+
+@md-input-padding-small-vertical:    4px - 1px; // 5
+@md-input-padding-small-horizontal:  0px; // 10
+@md-label-as-placeholder-shim-small: 8px; // manual adjustment of label top when positioned as placeholder
+@md-label-top-margin-small:          12px;
+
+@md-input-padding-xs-vertical:       2px; // 1
+@md-input-padding-xs-horizontal:     0px; // 5
+
+@md-input-border-radius-base:        4px;
+@md-input-border-radius-large:       6px;
+@md-input-border-radius-small:       3px;
+
+
+//** Default `.form-control` height
+@md-input-height-base:              (@md-input-line-height-computed + (@md-input-padding-base-vertical * 2) + 2);
+//** Large `.form-control` height
+@md-input-height-large:             (ceil(@md-input-font-size-large * @md-input-line-height-large) + (@md-input-padding-large-vertical * 2) + 2);
+//** Small `.form-control` height
+@md-input-height-small:             (floor(@md-input-font-size-small * @md-input-line-height-small) + (@md-input-padding-small-vertical * 2) + 2);
+
+
+
+
 // Card
 @card-body-text: @lightbg-text;
 @card-body-background: #fff;
@@ -90,15 +150,21 @@
 @checkbox-size: 20px;
 @checkbox-animation-ripple: 500ms;
 @checkbox-animation-check: 0.3s;
+@checkbox-checked-color: #4caf50;
+@checkbox-label-color: rgba(0, 0, 0, .54);
+@checkbox-border-color: @checkbox-label-color;
 
 // Popovers and Popups
 @popover-background: rgba(101, 101, 101, 0.9);
 @popover-color: #ececec;
 
-// Inputs
-@input-placeholder-color: #BDBDBD;
-@floating-label-size-ratio: 70 / 100;
-
 // Dropdown Menu
 @dropdown-radius: 2px;
 @dropdown-font-size: 16px;
+
+// Toggle
+@togglebutton-label-color: @checkbox-label-color;
+
+// Radio:
+@radio-label-color: @checkbox-label-color;
+@radio-border-color: @checkbox-border-color;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-material-design",
-  "version": "0.3.1-dev",
+  "version": "0.4.0",
   "description": "Material Design for Bootstrap 3",
   "main": "scripts/index.js",
   "scripts": {
@@ -31,7 +31,6 @@
     "jquery": ">=1.9.1"
   },
   "devDependencies": {
-    "bootstrap": ">=3.0",
     "grunt": "^0.4.5",
     "grunt-autoprefixer": "^1.0.1",
     "grunt-contrib-clean": "^0.6.0",
@@ -39,16 +38,17 @@
     "grunt-contrib-copy": "^0.6.0",
     "grunt-contrib-jasmine": "^0.8.0",
     "grunt-contrib-jshint": "^0.10.0",
-    "grunt-contrib-less": "^0.11.4",
+    "grunt-contrib-less": "^1.1.0",
     "grunt-contrib-sass": "^0.8.1",
     "grunt-contrib-uglify": "^0.6.0",
     "grunt-contrib-watch": "^0.6.1",
+    "grunt-bootlint": "latest",
+    "grunt-html": "latest",
     "grunt-csswring": "^1.1.0",
     "grunt-dependency-installer": "^0.2.0",
     "grunt-exec": "^0.4.6",
     "grunt-less-to-sass": "latest",
     "grunt-newer": "^0.7.0",
-    "jquery": ">=1.9.1",
     "jshint-stylish": "^1.0.0",
     "load-grunt-tasks": "^0.6.0",
     "spacejam": "^1.1.1"

sass/_buttons.scss

@@ -48,7 +48,8 @@
 
 }
 
-.btn {
+.btn,
+.input-group-btn .btn {
   &.btn-flat {
     background: none;
     box-shadow: none;
@@ -86,7 +87,8 @@
     &:active {
       @include shadow-z-1-hover();
     }
-    &, .ripple-wrapper {
+    &,
+    .ripple-wrapper {
       border-radius: 100%;
     }
     &.btn-fab-mini {

sass/_checkboxes.scss

@@ -1,13 +1,40 @@
 // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
 
+// http://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox
 .form-horizontal .checkbox {
   padding-top: 20px;
 }
+
+@mixin form-group-checkbox-variant($placeholder-font-size, $line-height){
+  .checkbox {
+    label {
+      font-size: $placeholder-font-size;
+      line-height: $line-height;
+      font-weight: normal;
+    }
+  }
+}
+
+.form-group {
+
+  // default label size/location
+  @include form-group-checkbox-variant($md-input-font-size-base, $md-input-line-height-base);
+
+  // sm label size/location
+  &.form-group-sm {
+    @include form-group-checkbox-variant($md-input-font-size-small, $md-input-line-height-small);
+  }
+
+  // lg label size/location
+  &.form-group-lg {
+    @include form-group-checkbox-variant($md-input-font-size-large, $md-input-line-height-large);
+  }
+
   .checkbox {
-  transform: translateZ(0); // Force 3d rendering
     label {
       cursor: pointer;
       padding-left: 0; // Reset for Bootstrap rule
+      color: $checkbox-label-color;
     }
 
     // Hide native checkbox
@@ -27,7 +54,7 @@
       vertical-align: middle;
       position: relative;
       top: 3px;
-    &:before {
+      &:before {  // FIXME: document why this is necessary (doesn't seem to be on chrome)
         display: block;
         position: absolute;
         left: 0;
@@ -47,7 +74,7 @@
         display: inline-block;
         width: $checkbox-size;
         height: $checkbox-size;
-      border: 2px solid;
+        border: 2px solid $checkbox-border-color;
         border-radius: 2px;
         overflow: hidden;
         z-index: 1;
@@ -103,7 +130,10 @@
     }
 
     // Style for disabled inputs
+    fieldset[disabled] &,
+    fieldset[disabled] & input[type=checkbox],
     input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
+    input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check,
     input[type=checkbox][disabled] + .circle {
       opacity: 0.5;
     }
@@ -113,10 +143,11 @@
     }
 
     @include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:after"), background-color, $success);
-  @include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:before"), color, #4caf50);
+    @include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:before"), color, $checkbox-checked-color);
-  @include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), color, #4caf50);
+    @include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), color, $checkbox-checked-color);
+    @include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), border-color, $checkbox-checked-color);
+  }
 }
-
 
 @keyframes checkbox-on {
   0% {

sass/_inputs-size.scss

@@ -0,0 +1,220 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
+//
+// Forms - sizing - material - mirrors bootstrap/forms.less with custom sizing
+//
+// NOTE: this is intentionally kept structurally _identical_ to the bootstrap/forms.less file to make it easier
+//        to identify differences in sizing approaches to form inputs.
+// --------------------------------------------------
+
+legend {
+  margin-bottom: $md-input-line-height-computed;
+  font-size: ($md-input-font-size-base * 1.5);
+}
+
+// Adjust output element
+output {
+  padding-top: ($md-input-padding-base-vertical + 1);
+  font-size: $md-input-font-size-base;
+  line-height: $md-input-line-height-base;
+}
+
+.form-control {
+  height: $md-input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+  padding: $md-input-padding-base-vertical $md-input-padding-base-horizontal;
+  font-size: $md-input-font-size-base;
+  line-height: $md-input-line-height-base;
+}
+
+// Special styles for iOS temporal inputs
+//
+// In Mobile Safari, setting `display: block` on temporal inputs causes the
+// text within the input to become vertically misaligned. As a workaround, we
+// set a pixel line-height that matches the given height of the input, but only
+// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
+//
+// Note that as of 8.3, iOS doesn't support `datetime` or `week`.
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  input[type="date"],
+  input[type="time"],
+  input[type="datetime-local"],
+  input[type="month"] {
+    &.form-control {
+      line-height: $md-input-height-base;
+    }
+
+    &.input-sm,
+    .input-group-sm & {
+      line-height: $md-input-height-small;
+    }
+
+    &.input-lg,
+    .input-group-lg & {
+      line-height: $md-input-height-large;
+    }
+  }
+}
+
+.radio,
+.checkbox {
+
+  label {
+    min-height: $md-input-line-height-computed; // Ensure the input doesn't jump when there is no text
+  }
+}
+
+
+// Static form control text
+//
+// Apply class to a `p` element to make any string of text align with labels in
+// a horizontal form layout.
+
+.form-control-static {
+  // Size it appropriately next to real form controls
+  padding-top: ($md-input-padding-base-vertical + 1);
+  padding-bottom: ($md-input-padding-base-vertical + 1);
+  min-height: ($md-input-line-height-computed + $md-input-font-size-base);
+}
+
+
+// Form control sizing
+//
+// Relative text size, padding, and border-radii changes for form controls. For
+// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
+// element gets special love because it's special, and that's a fact!
+
+// mixin pulled from bootstrap and altered for less/sass compatibility
+@mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius){
+
+  #{$parent} {
+    height: $input-height;
+    padding: $padding-vertical $padding-horizontal;
+    font-size: $font-size;
+    line-height: $line-height;
+    border-radius: $border-radius;
+  }
+
+  select#{$parent} {
+    height: $input-height;
+    line-height: $input-height;
+  }
+
+  textarea#{$parent},
+  select[multiple]#{$parent} {
+    height: auto;
+  }
+}
+
+
+
+// Form control sizing
+//
+// Build on `.form-control` with modifier classes to decrease or increase the
+// height and font-size of form controls.
+//
+// The `.form-group-* form-control` variations are sadly duplicated to avoid the
+// issue documented in https://github.com/twbs/bootstrap/issues/15074.
+.input-sm {
+  @include input-size('.input-sm', $md-input-height-small, $md-input-padding-small-vertical, $md-input-padding-small-horizontal, $md-input-font-size-small, $md-input-line-height-small, $md-input-border-radius-small);
+}
+.form-group-sm {
+  .form-control {
+    height: $md-input-height-small;
+    padding: $md-input-padding-small-vertical $md-input-padding-small-horizontal;
+    font-size: $md-input-font-size-small;
+    line-height: $md-input-line-height-small;
+  }
+  select.form-control {
+    height: $md-input-height-small;
+    line-height: $md-input-height-small;
+  }
+  textarea.form-control,
+  select[multiple].form-control {
+    height: auto;
+  }
+  .form-control-static {
+    height: $md-input-height-small;
+    min-height: ($md-input-line-height-computed + $md-input-font-size-small);
+    padding: ($md-input-padding-small-vertical + 1) $md-input-padding-small-horizontal;
+    font-size: $md-input-font-size-small;
+    line-height: $md-input-line-height-small;
+  }
+}
+
+.input-lg {
+  @include input-size('.input-lg', $md-input-height-large, $md-input-padding-large-vertical, $md-input-padding-large-horizontal, $md-input-font-size-large, $md-input-line-height-large, $md-input-border-radius-large);
+}
+.form-group-lg {
+  .form-control {
+    height: $md-input-height-large;
+    padding: $md-input-padding-large-vertical $md-input-padding-large-horizontal;
+    font-size: $md-input-font-size-large;
+    line-height: $md-input-line-height-large;
+  }
+  select.form-control {
+    height: $md-input-height-large;
+    line-height: $md-input-height-large;
+  }
+  textarea.form-control,
+  select[multiple].form-control {
+    height: auto;
+  }
+  .form-control-static {
+    height: $md-input-height-large;
+    min-height: ($md-input-line-height-computed + $md-input-font-size-large);
+    padding: ($md-input-padding-large-vertical + 1) $md-input-padding-large-horizontal;
+    font-size: $md-input-font-size-large;
+    line-height: $md-input-line-height-large;
+  }
+}
+
+
+.form-horizontal {
+
+  // Consistent vertical alignment of radios and checkboxes
+  //
+  // Labels also get some reset styles, but that is scoped to a media query below.
+  .radio,
+  .checkbox,
+  .radio-inline,
+  .checkbox-inline {
+    padding-top: ($md-input-padding-base-vertical + 1); // Default padding plus a border
+  }
+  // Account for padding we're adding to ensure the alignment and of help text
+  // and other content below items
+  .radio,
+  .checkbox {
+    min-height: ($md-input-line-height-computed + ($md-input-padding-base-vertical + 1));
+  }
+
+  // Reset spacing and right align labels, but scope to media queries so that
+  // labels on narrow viewports stack the same as a default form example.
+  @media (min-width: $screen-sm-min) {
+    .control-label {
+      padding-top: ($md-input-padding-base-vertical + 1); // Default padding plus a border
+    }
+  }
+
+
+  // Form group sizes
+  //
+  // Quick utility class for applying `.input-lg` and `.input-sm` styles to the
+  // inputs and labels within a `.form-group`.
+  .form-group-lg {
+    @media (min-width: $screen-sm-min) {
+      .control-label {
+        padding-top: (($md-input-padding-large-vertical * $md-input-line-height-large) + 1);
+        font-size: $md-input-font-size-large;
+      }
+    }
+  }
+  .form-group-sm {
+    @media (min-width: $screen-sm-min) {
+      .control-label {
+        padding-top: ($md-input-padding-small-vertical + 1);
+        font-size: $md-input-font-size-small;
+      }
+    }
+  }
+}

sass/_inputs.scss

@@ -1,241 +1,287 @@
 // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
 
-fieldset[disabled] .form-control, .form-control {
+@import '_inputs-size';
-  &, &:focus, &.focus {
+
-    padding: 0;
+// usage: @include form-group-validation-state($input-danger);
-    float: none;
+@mixin form-group-validation-state($name, $color){
-    border: 0;
+
+  &.#{$name} { // e.g. has-error
+    .form-control {
       box-shadow: none;
-    border-radius: 0;
+    }
-    &:disabled {
+    &.is-focused .form-control {
-      border-style: dashed;
+      background-image: linear-gradient($color, $color), linear-gradient($input-underline-color, $input-underline-color);
-      border-bottom: 1px solid #757575;
+    }
+    label.control-label,
+    .help-block {
+      color: $color;
     }
   }
 }
 
-fieldset[disabled] .form-control, .form-control {
+@mixin form-group-size-variant($placeholder-font-size, $label-top-margin, $vertical-padding, $line-height, $label-as-placeholder-shim){
-  &:textarea {
+  $static-font-size: ceil(($label-floating-size-ratio * $placeholder-font-size)) !default;
-    height: 40px;
+  $static-line-height: ($label-floating-size-ratio * $line-height) !default;
+
+  $label-as-placeholder-top: -1 * ($vertical-padding + $label-as-placeholder-shim) !default;
+  $label-top: $label-as-placeholder-top - ($placeholder-font-size + $vertical-padding) !default;
+
+  $help-block-font-size: ceil(($help-block-size-ratio * $placeholder-font-size)) !default;
+  $help-block-line-height: ($help-block-size-ratio * $line-height) !default;
+
+  // form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned
+  margin: ($label-top-margin + $static-font-size) 0 0 0;
+
+  .form-control {
+    @include material-placeholder {
+      font-size: $placeholder-font-size;
+    
+}
+    margin-bottom: $vertical-padding; // must be specified to give help-block vertical space
+  }
+
+  // upon collapsing margins, the largest margin is honored which collapses the form-control margin, so the form-control margin
+  //  must also be expressed as form-group padding
+  padding-bottom: $vertical-padding;
+
+  .help-block {
+    margin-top: 0px; // allow the input margin to set-off the top of the help-block
+    font-size: $help-block-font-size;
+  }
+
+  // smaller focused or static size
+  label.control-label {
+    font-size: $static-font-size;
+    line-height: $static-line-height;
+  }
+
+  // larger labels as placeholders
+  &.label-floating,
+  &.label-placeholder {
+    label.control-label {
+      top: $label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
+      font-size: $placeholder-font-size;
+      line-height: $line-height;
     }
   }
 
-select[multiple].form-control {
+  // static or focused floating labels
-  &, &:focus, &.focus {
+  &.label-static,
-    height: 85px;
+  &.label-floating.is-focused,
+  &.label-floating:not(.is-empty) {
+    label.control-label {
+      top: $label-top;
+      left: 0;
+      // must repeat because the selector above is more specific than the general label sizing
+      font-size: $static-font-size;
+      line-height: $static-line-height;
+    }
   }
 }
 
+.form-group {
+  //border: solid 1px red;
+  position: relative;
+
+  // -----
+  // Inputs
+  //
+  // Reference http://www.google.com/design/spec/components/text-fields.html
+  // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
   .form-control {
     border: 0;
     background-image: linear-gradient($primary, $primary), linear-gradient($input-underline-color, $input-underline-color);
     background-size: 0 2px, 100% 1px;
     background-repeat: no-repeat;
     background-position: center bottom, center calc(100% - 1px);
-  background-color: transparent;
     background-color: rgba(0, 0, 0, 0);
     transition: background 0s ease-out;
-  &::-webkit-input-placeholder {
+    float: none;
+    box-shadow: none;
+    border-radius: 0;
+
+    // Placeholders and and labels-as-placeholders should look the same
+    @include material-placeholder {
       color: $input-placeholder-color;
-  }
+      font-weight: normal;
-  &::-moz-placeholder {
+    
-    color: $input-placeholder-color; 
-  }
-  &:-ms-input-placeholder {  
-    color: $input-placeholder-color;
-  }
-}
-.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
-  background-color: transparent;
-  background-color: rgba(0,0,0,0);
-}
-fieldset[disabled] .form-control:disabled, 
-.form-control-wrapper .form-control:disabled, 
-.form-control:disabled, 
-fieldset[disabled] .form-control:focus:disabled, 
-.form-control-wrapper .form-control:focus:disabled, 
-.form-control:focus:disabled, 
-fieldset[disabled] .form-control.focus:disabled, 
-.form-control-wrapper .form-control.focus:disabled, 
-.form-control.focus:disabled {
-  border: 0; // Ugly override of Bootstrap border
 }
 
-.form-control:focus, .form-control.focus {
+
+    //&:textarea {    // appears to be an invalid selector
+    //  height: 40px;
+    //}
+
+    &[readonly],
+    &[disabled],
+    fieldset[disabled] & {
+      background-color: rgba(0, 0, 0, 0);
+    }
+
+    &[disabled],
+    fieldset[disabled] & {
+      background-image: none;
+      border-bottom: 1px dotted $input-underline-color;
+    }
+  }
+
+  &.is-focused .form-control {
     outline: none;
     background-image: linear-gradient($primary, $primary), linear-gradient($input-underline-color, $input-underline-color);
     background-size: 100% 2px, 100% 1px;
     box-shadow: none;
     transition-duration: 0.3s;
-}
 
-
+    .material-input:after {
-.form-control-wrapper {
-  position: relative;
-
-  .floating-label {
-    color: $input-placeholder-color;
-    position: absolute;
-    pointer-events: none;
-    left: 0px;
-    top: 5px;
-    transition: 0.3s ease all;
-  }
-
-  // Input sizes
-  .floating-label { // base
-    font-size: $font-size-base;
-  }
-  .form-control:focus ~ .floating-label,
-  .form-control:not(.empty) ~ .floating-label {
-    top: $floating-label-size-ratio * -$font-size-base;
-    font-size: $floating-label-size-ratio * $font-size-base;
-  }
-
-  .input-sm + .floating-label { // small
-    font-size: $font-size-small;
-    top: 7px;
-  }
-  .form-control.input-sm:focus ~ .floating-label,
-  .form-control.input-sm:not(.empty) ~.floating-label {
-    top: $floating-label-size-ratio * -$font-size-small;
-    font-size: $floating-label-size-ratio * $font-size-small;
-  }
-
-  .input-lg + .floating-label {
-    font-size: $font-size-large;
-    top: 10px;
-  }
-  .form-control.input-lg:focus ~ .floating-label,
-  .form-control.input-lg:not(.empty) ~ .floating-label {
-    top: $floating-label-size-ratio * -$font-size-large;
-    font-size: $floating-label-size-ratio * $font-size-large;
-  }
-
-  .form-control:focus ~ .floating-label {
-    color: $primary;
-  }
-  .form-control:not(.empty):invalid ~ .floating-label, .form-control.focus:invalid ~ .floating-label {
-    color: $input-danger;
-  }
-  .form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after {
       background-color: $input-default;
     }
-  .form-control:invalid {
-    background-image: linear-gradient($input-danger, $input-danger), linear-gradient($input-underline-color, $input-underline-color);
-  }
-  textarea { resize: none; }
-  textarea ~ .form-control-highlight {
-    margin-top: -11px;
   }
 
-  // Hints
+  // -----
-  .hint {
+  // Labels
+  //
+  // Reference http://www.google.com/design/spec/components/text-fields.html
+  // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
+  &.label-static,
+  &.label-placeholder,
+  &.label-floating {
+
+    label.control-label {
       position: absolute;
-    font-size: 80%;
+      pointer-events: none;
+      transition: 0.3s ease all;
+    }
+  }
+
+  label.control-label {
+    // same label properties as form-group placeholder
+    color: $input-placeholder-color;
+    font-weight: normal;
+    margin: 16px 0 0 0; // std and lg
+  }
+
+  // hide label-placeholders when the field is not empty
+  &.label-placeholder:not(.is-empty){
+    label.control-label{
       display: none;
     }
-  .form-control:focus ~ .hint, .form-control.focus ~ .hint {
+  }
+
+  @include variations(unquote(" label.control-label"), color, $input-placeholder-color);  // default label color variations
+  @include variations(unquote(".is-focused label.control-label"), color, $input-default); // focused label color variations
+  @include variations(unquote(".is-focused.label-placeholder label.control-label"), color, $input-placeholder-color);  // default label color variations
+
+  // default floating size/location
+  @include form-group-size-variant($md-input-font-size-base, $md-label-top-margin-base, $md-input-padding-base-vertical, $md-input-line-height-base, $md-label-as-placeholder-shim-base);
+
+  // sm floating size/location
+  &.form-group-sm {
+    @include form-group-size-variant($md-input-font-size-small, $md-label-top-margin-small, $md-input-padding-small-vertical, $md-input-line-height-small, $md-label-as-placeholder-shim-small);
+  }
+
+  // lg floating size/location
+  &.form-group-lg {
+    @include form-group-size-variant($md-input-font-size-large, $md-label-top-margin-large, $md-input-padding-large-vertical, $md-input-line-height-large, $md-label-as-placeholder-shim-large);
+  }
+
+  // Hints - position: absolute approach - uses no vertical space, text wrapping - not so good.
+  .help-block {
+    position: absolute; // do not use position: absolute because width/wrapping isn't automatic and overflows occur
+    display: none;
+  }
+
+  &.is-focused {
+    .help-block {
       display: block;
     }
+  }
 
-  select ~ .material-input:after {
+  // SASS conversion note: please mirror any content change in _mixins-shared.scss bg-img-variations-content
+  @include bg-img-variations(unquote(".is-focused .form-control"), $primary);
+
+  @include form-group-validation-state(has-warning, $input-warning);
+  @include form-group-validation-state(has-error, $input-danger);
+  @include form-group-validation-state(has-success, $input-success);
+  @include form-group-validation-state(has-info, $input-info);
+
+  textarea {
+    resize: none;
+    & ~ .form-control-highlight {
+      margin-top: -11px;
+    }
+  }
+
+  select {
+    appearance: none; // Fix for OS X
+
+    & ~ .material-input:after {
       display: none;
     }
-
-  // Fix for OS X
-  select {
-    appearance: none;
-  }
-
-}
-
-.form-group {
-  &.has-warning {
-    .form-control {
-      box-shadow: none;
-    }
-    .material-input:focus, .form-control:focus, .form-control.focus {
-      background-image: linear-gradient($input-warning, $input-warning), linear-gradient($input-underline-color, $input-underline-color);
-      box-shadow: none;
-    }
-    .control-label, input.form-control:focus ~ .floating-label {
-      color: $input-warning;
-    }
-  }
-  &.has-error {
-    .form-control {
-      box-shadow: none;
-    }
-    .material-input:focus, .form-control:focus, .form-control.focus {
-      background-image: linear-gradient($input-danger, $input-danger), linear-gradient($input-underline-color, $input-underline-color);
-      box-shadow: none;
-    }
-    .control-label, input.form-control:focus ~ .floating-label {
-      color: $input-danger;
-    }
-  }
-  &.has-success {
-    .form-control {
-      box-shadow: none;
-    }
-    .material-input:focus, .form-control:focus, .form-control.focus {
-      background-image: linear-gradient($input-success, $input-success), linear-gradient($input-underline-color, $input-underline-color);
-      box-shadow: none;
-    }
-    .control-label, input.form-control:focus ~ .floating-label {
-      color: $input-success;
-    }
-  }
-  &.has-info {
-    .form-control {
-      box-shadow: none;
-    }
-    .material-input:focus, .form-control:focus, .form-control.focus {
-      background-image: linear-gradient($input-info, $input-info), linear-gradient($input-underline-color, $input-underline-color);
-      box-shadow: none;
-    }
-    .control-label, input.form-control:focus ~ .floating-label {
-      color: $input-info;
-    }
-  }
-  // SASS conversion note: please mirror any content change in _mixins-shared.scss bg-img-variations-content
-  @include bg-img-variations(unquote(" .form-control:focus"), $primary);
-  @include variations(unquote(" .control-label"), color, $lightbg-text);
-  @include variations(unquote(" input.form-control:focus ~ .floating-label"), color, $input-default);
-
-}
-
-.input-group {
-  .form-control-wrapper {
-    .form-control {
-      float: none;
-    }
-    margin-right: 5px;
-    margin-left: 5px;
-  }
-  .input-group-addon {
-    border: 0;
-    background: transparent;
-  }
-  .input-group-btn .btn {
-    border-radius: 4px;
-    margin: 0;
   }
 }
 
 select.form-control {
+
   border: 0;
   box-shadow: none;
   border-radius: 0;
-  &:focus, &.focus {
+
+  .form-group.is-focused & {
     box-shadow: none;
-    border-color: #757575;
+    border-color: $input-underline-color;
+  }
+
+  &[multiple] {
+    &,
+    .form-group.is-focused & {
+      height: 85px;
+    }
   }
 }
 
-// Input files (kinda hack)
+@mixin input-group-button-variation($vertical-padding){
-.form-control-wrapper input[type=file] {
+  .input-group-btn {
+    .btn {
+      margin: 0 0 $vertical-padding 0;
+    }
+  }
+}
+
+// ----------------
+// input group/addon related styles
+
+// default margin
+@include input-group-button-variation($md-input-padding-base-vertical);
+
+.form-group {
+  //.form-control {
+  //  float: none;
+  //}
+
+  // sm margin
+  &.form-group-sm {
+    @include input-group-button-variation($md-input-padding-small-vertical);
+  }
+
+  // lg margin
+  &.form-group-lg {
+    @include input-group-button-variation($md-input-padding-large-vertical);
+  }
+}
+
+.input-group {  // may be in or outside of form-group
+  .input-group-btn {
+    padding: 0 12px; // match addon spacing
+  }
+
+  .input-group-addon {
+    border: 0;
+    background: transparent;
+  }
+}
+
+// Input files - hide actual input - requires specific markup in the sample.
+.form-group input[type=file] {
   opacity: 0;
   position: absolute;
   top: 0;
@@ -246,3 +292,4 @@ select.form-control {
   height: 100%;
   z-index: 100;
 }
+

sass/_mixins-shared.scss

@@ -1,7 +1,14 @@
 // This file is NOT automatically converted and must be manually merged
-
 @import "mixins-utilities";
 
+// Placeholder text
+@mixin material-placeholder() {
+  &::-moz-placeholder {@content; } // Firefox
+  &:-ms-input-placeholder {@content; } // Internet Explorer 10+
+  &::-webkit-input-placeholder  {@content; } // Safari and Chrome
+}
+
+
 // variations(unquote(""), background-color, #FFF);
 @mixin variations($extra, $material-param-1, $default) {
   @include generic-variations($extra, $default, "variations-content", $material-param-1);
@@ -89,7 +96,7 @@
   background-color: $material-color;
   color: $material-text-color;
   // deeply defined to override welljumbo class without !impotant need
-  .navbar-form .form-control-wrapper input.form-control::placeholder, .navbar-form input.form-control::placeholder {
+  .navbar-form .form-group input.form-control::placeholder, .navbar-form input.form-control::placeholder {
     color: $material-text-color;
   }
   .dropdown-menu {

sass/_navbar.scss

@@ -157,15 +157,33 @@
 
   .navbar-form {
     margin-top: 16px;
-    .form-control-wrapper .form-control, .form-control {
+    .form-group {
-      border-color: inherit;
+      margin: 0;
-      color: inherit;
+      padding: 0;
-    }
+
-    .form-control-wrapper {
+      .material-input:before,
-      .material-input:before, input:focus ~ .material-input:after {
+      &.is-focused .material-input:after {
         background-color: inherit;
       }
     }
+
+    .form-group .form-control,
+    .form-control {
+      border-color: inherit;
+      color: inherit;
+      padding: 0;
+      margin: 0;
+
+      // re-normalize inputs in a navbar the size of standard bootstrap since our normal inputs are larger by spec than bootstrap
+      //---
+      //height: $input-height-base;
+      $bs-line-height-base: 1.428571429 !default;
+      $bs-line-height-computed:    floor(($font-size-base * $bs-line-height-base)) !default; // ~20px
+      height: ($bs-line-height-computed + 8px);
+      font-size: $font-size-base;
+      line-height: $bs-line-height-base;
+      //---
+    }
   }
 
   // SASS conversion note: please mirror any content change in _mixins-shared.scss navbar-variations-content

sass/_plugin-selectize.scss

@@ -39,7 +39,7 @@
             border: 0px;
             background: transparent;
         }
-        &.floating-label-fix input {
+        &.label-floating-fix input {
             opacity: 0;
         }
         > div, > .item {

sass/_radios.scss

@@ -3,11 +3,40 @@
 .form-horizontal .radio {
   margin-bottom: 10px;
 }
+
+@mixin form-group-radio-variant($placeholder-font-size, $line-height){
+  .radio {
+    label {
+      font-size: $placeholder-font-size;
+      line-height: $line-height;
+      font-weight: normal;
+    }
+  }
+}
+
+.form-group {
+
+  // default label size/location
+  @include form-group-radio-variant($md-input-font-size-base, $md-input-line-height-base);
+
+  // sm label size/location
+  &.form-group-sm {
+    @include form-group-radio-variant($md-input-font-size-small, $md-input-line-height-small);
+  }
+
+  // lg label size/location
+  &.form-group-lg {
+    @include form-group-radio-variant($md-input-font-size-large, $md-input-line-height-large);
+  }     
+}
+
 .radio {
   label {
     cursor: pointer;
     padding-left: 45px;
     position: relative;
+    color: $radio-label-color;
+
     span {
       display: block;
       position: absolute;
@@ -16,7 +45,7 @@
       transition-duration: 0.2s;
     }
     .circle {
-      border: 2px solid $lightbg-text;
+      border: 2px solid $radio-border-color;
       height: 15px;
       width: 15px;
       border-radius: 100%;
@@ -74,7 +103,6 @@
   input[type=radio][disabled] ~ .check {
     background-color: $lightbg-text;
   }
-
 }
 
 @keyframes rippleOn {

sass/_togglebutton.scss

@@ -1,13 +1,39 @@
 // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
 
+@mixin form-group-toggle-variant($placeholder-font-size, $line-height){
+  .togglebutton {
+    label {
+      font-size: $placeholder-font-size;
+      line-height: $line-height;
+      font-weight: normal;
+    }
+  }
+}
+
+.form-group {
+
+  // default label size/location
+  @include form-group-toggle-variant($md-input-font-size-base, $md-input-line-height-base);
+
+  // sm label size/location
+  &.form-group-sm {
+    @include form-group-toggle-variant($md-input-font-size-small, $md-input-line-height-small);
+  }
+
+  // lg label size/location
+  &.form-group-lg {
+    @include form-group-toggle-variant($md-input-font-size-large, $md-input-line-height-large);
+  }
+
   .togglebutton {
     vertical-align: middle;
     &, label, input, .toggle {
       user-select: none;
     }
     label {
-    font-weight: 400;
       cursor: pointer;
+      color: $togglebutton-label-color;
+
       // Hide original checkbox
       input[type=checkbox] {
         opacity: 0;
@@ -65,3 +91,4 @@
     // Ripple on
     @include bg-box-shadow-variations(unquote(" label input[type=checkbox]:checked + .toggle:active:after"), $primary);
   }
+}

sass/_variables.scss

@@ -76,10 +76,70 @@ $font-size-base: 14px !default;
 $font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
 $font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px
 
+$screen-sm:                  768px !default;
+$screen-sm-min:              $screen-sm !default;
+
+
 // Global Material variables
 $material-border-radius: 2px !default;
+
+// --------------------
+// inputs
+$input-placeholder-color: #BDBDBD !default;
+$label-floating-size-ratio: 75 / 100 !default;
+$help-block-size-ratio: 75 / 100 !default;
 $input-underline-color: #D2D2D2 !default;
 
+$md-input-font-size-base: 16px !default;
+$md-input-font-size-large: ceil(($font-size-base * 1.25)) !default; // ~20px
+$md-input-font-size-small: ceil(($font-size-base * 0.75)) !default; // ~12px
+
+// size when static or floating with focus i.e. 16px
+//$md-input-label-font-size-base: ceil(($label-floating-size-ratio * $md-input-font-size-base)) !default;
+//$md-input-label-font-size-small:ceil(( $label-floating-size-ratio * $md-input-font-size-small)) !default;
+//$md-input-label-font-size-large: ceil(($label-floating-size-ratio * $md-input-font-size-large)) !default;
+
+//** Unit-less `line-height` for use in components like buttons.
+$md-input-line-height-base:        1.428571429 !default; // 20/14
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+$md-input-line-height-computed:    floor(($md-input-font-size-base * $md-input-line-height-base)) !default; // ~20px
+$md-input-line-height-large:         1.3333333 !default; // extra decimals for Win 8.1 Chrome
+$md-input-line-height-small:         1.5 !default;
+
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+$md-input-padding-base-vertical:     8px - 1px !default; // was 6.
+$md-input-padding-base-horizontal:   0px !default; // was 12.
+$md-label-as-placeholder-shim-base:  0px !default; // manual adjustment of label top when positioned as placeholder
+$md-label-top-margin-base:           16px !default;
+
+$md-input-padding-large-vertical:    10px - 1px !default; // 10
+$md-input-padding-large-horizontal:  0px !default;  // 16
+$md-label-as-placeholder-shim-large: -4px !default; // manual adjustment of label top when positioned as placeholder
+$md-label-top-margin-large:          16px !default;
+
+$md-input-padding-small-vertical:    4px - 1px !default; // 5
+$md-input-padding-small-horizontal:  0px !default; // 10
+$md-label-as-placeholder-shim-small: 8px !default; // manual adjustment of label top when positioned as placeholder
+$md-label-top-margin-small:          12px !default;
+
+$md-input-padding-xs-vertical:       2px !default; // 1
+$md-input-padding-xs-horizontal:     0px !default; // 5
+
+$md-input-border-radius-base:        4px !default;
+$md-input-border-radius-large:       6px !default;
+$md-input-border-radius-small:       3px !default;
+
+
+//** Default `.form-control` height
+$md-input-height-base:              ($md-input-line-height-computed + ($md-input-padding-base-vertical * 2) + 2) !default;
+//** Large `.form-control` height
+$md-input-height-large:             (ceil($md-input-font-size-large * $md-input-line-height-large) + ($md-input-padding-large-vertical * 2) + 2) !default;
+//** Small `.form-control` height
+$md-input-height-small:             (floor($md-input-font-size-small * $md-input-line-height-small) + ($md-input-padding-small-vertical * 2) + 2) !default;
+
+
+
+
 // Card
 $card-body-text: $lightbg-text !default;
 $card-body-background: #fff !default;
@@ -92,15 +152,21 @@ $background-disabled: #eaeaea !default;
 $checkbox-size: 20px !default;
 $checkbox-animation-ripple: 500ms !default;
 $checkbox-animation-check: 0.3s !default;
+$checkbox-checked-color: #4caf50 !default;
+$checkbox-label-color: rgba(0, 0, 0, .54) !default;
+$checkbox-border-color: $checkbox-label-color !default;
 
 // Popovers and Popups
 $popover-background: rgba(101, 101, 101, 0.9) !default;
 $popover-color: #ececec !default;
 
-// Inputs
-$input-placeholder-color: #BDBDBD !default;
-$floating-label-size-ratio: 70 / 100 !default;
-
 // Dropdown Menu
 $dropdown-radius: 2px !default;
 $dropdown-font-size: 16px !default;
+
+// Toggle
+$togglebutton-label-color: $checkbox-label-color !default;
+
+// Radio:
+$radio-label-color: $checkbox-label-color !default;
+$radio-border-color: $checkbox-border-color !default;

scripts/material.js

@@ -70,36 +70,57 @@
       .filter(":notmdproc")
       .data("mdproc", true)
       .each( function() {
-        var $this = $(this);
+        var $input = $(this);
 
-        if (!$this.attr("data-hint") && !$this.hasClass("floating-label")) {
+        // Requires form-group standard markup (will add it if necessary)
-          return;
+        var $formGroup = $input.closest(".form-group"); // note that form-group may be grandparent in the case of an input-group
-        }
+        if($formGroup.length === 0){
-        $this.wrap("<div class=form-control-wrapper></div>");
+          $input.wrap("<div class='form-group'></div>");
-        $this.after("<span class=material-input></span>");
+          $formGroup = $input.closest(".form-group"); // find node after attached (otherwise additional attachments don't work)
-
-        // Add floating label if required
-        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>");
         }
 
-        // Add hint label if required
+        // Legacy - Add hint label if using the old shorthand data-hint attribute on the input
-        if ($this.attr("data-hint")) {
+        if ($input.attr("data-hint")) {
-          $this.after("<div class=hint>" + $this.attr("data-hint") + "</div>");
+          $input.after("<p class='help-block'>" + $input.attr("data-hint") + "</p>");
+          $input.removeAttr("data-hint");
+        }
+
+        // Legacy - Change input-sm/lg to form-group-sm/lg instead (preferred standard and simpler css/less variants)
+        var legacySizes = {
+          "input-lg": "form-group-lg",
+          "input-sm": "form-group-sm"
+        };
+        $.each( legacySizes, function( legacySize, standardSize ) {
+          if ($input.hasClass(legacySize)) {
+            $input.removeClass(legacySize);
+            $formGroup.addClass(standardSize);
+          }
+        });
+
+        // Legacy - Add label-floating if using old shorthand <input class="floating-label" placeholder="foo">
+        if ($input.hasClass("floating-label")) {
+          var placeholder = $input.attr("placeholder");
+          $input.attr("placeholder", null).removeClass("floating-label");
+          var id = $input.attr("id");
+          var forAttribute = "";
+          if(id) {
+            forAttribute = "for='" + id + "'";
+          }
+          $formGroup.addClass("label-floating");
+          $input.after("<label " + forAttribute + "class='control-label'>" + placeholder + "</label>");
         }
 
         // Set as empty if is empty (damn I must improve this...)
-        if ($this.val() === null || $this.val() == "undefined" || $this.val() === "") {
+        if ($input.val() === null || $input.val() == "undefined" || $input.val() === "") {
-          $this.addClass("empty");
+          $formGroup.addClass("is-empty");
         }
 
+          // Add at the end of the form-group
+        $formGroup.append("<span class='material-input'></span>");
+
         // Support for file input
-        if ($this.parent().next().is("[type=file]")) {
+        if ($formGroup.find("input[type=file]").length > 0) {
-          $this.parent().addClass("fileinput");
+          $formGroup.addClass("is-fileinput");
-          var $input = $this.parent().next().detach();
-          $this.after($input);
         }
       });
     },
@@ -108,36 +129,71 @@
       .on("change", ".checkbox input[type=checkbox]", function() { $(this).blur(); })
       .on("keydown paste", ".form-control", function(e) {
         if(_isChar(e)) {
-          $(this).removeClass("empty");
+          $(this).closest(".form-group").removeClass("is-empty");
         }
       })
       .on("keyup change", ".form-control", function() {
-        var $this = $(this);
+        var $input = $(this);
-        if ($this.val() === "" && (typeof $this[0].checkValidity === "undefined" || $this[0].checkValidity())) {
+        var $formGroup = $input.closest(".form-group");
-          $this.addClass("empty");
+        var isValid = (typeof $input[0].checkValidity === "undefined" || $input[0].checkValidity());
-        } else {
+
-          $this.removeClass("empty");
+        if ($input.val() === "" && isValid) {
+          $formGroup.addClass("is-empty");
+        }
+        else {
+          $formGroup.removeClass("is-empty");
+        }
+
+        // Validation events do not bubble, so they must be attached directly to the input: http://jsfiddle.net/PEpRM/1/
+        //  Further, even the bind method is being caught, but since we are already calling #checkValidity here, just alter
+        //  the form-group on change.
+        //
+        // NOTE: I'm not sure we should be intervening regarding validation, this seems better as a README and snippet of code.
+        //        BUT, I've left it here for backwards compatibility.
+        if(isValid){
+          $formGroup.removeClass("has-error");
+        }
+        else{
+          $formGroup.addClass("has-error");
         }
       })
-      .on("focus", ".form-control-wrapper.fileinput", function() {
+      .on("focus", ".form-control, .form-group.is-fileinput", function() {
-        $(this).find("input").addClass("focus");
+        $(this).closest(".form-group").addClass("is-focused"); // add class to form-group
       })
-      .on("blur", ".form-control-wrapper.fileinput", function() {
+      .on("blur", ".form-control, .form-group.is-fileinput", function() {
-        $(this).find("input").removeClass("focus");
+        $(this).closest(".form-group").removeClass("is-focused"); // remove class from form-group
       })
-      .on("change", ".form-control-wrapper.fileinput [type=file]", function() {
+      // make sure empty is added back when there is a programmatic value change.
-        var $this = $(this);
+      //  NOTE: programmatic changing of value using $.val() must trigger the change event i.e. $.val('x').trigger('change')
+      .on("change", ".form-group input", function() {
+        var $input = $(this);
+        if($input.attr("type") == "file") {
+          return;
+        }
+
+        var $formGroup = $input.closest(".form-group");
+        var value = $input.val();
+        if (value) {
+          $formGroup.removeClass("is-empty");
+        } else {
+          $formGroup.addClass("is-empty");
+        }
+      })
+      // set the fileinput readonly field with the name of the file
+      .on("change", ".form-group.is-fileinput input[type='file']", function() {
+        var $input = $(this);
+        var $formGroup = $input.closest(".form-group");
         var value = "";
         $.each(this.files, function(i, file) {
           value += file.name + ", ";
         });
         value = value.substring(0, value.length - 2);
         if (value) {
-          $this.prev().removeClass("empty");
+          $formGroup.removeClass("is-empty");
         } else {
-          $this.prev().addClass("empty");
+          $formGroup.addClass("is-empty");
         }
-        $this.prev().val(value);
+        $formGroup.find("input.form-control[readonly]").val(value);
       });
     },
     "ripples": function(selector) {
@@ -174,7 +230,7 @@
           });
         }, 100);
       })
-      .on("blur", "input", function() {
+      .on("blur", ".form-group input", function() {
         clearInterval(focused);
       });
     },