0.4.2

2025-02-18 04:30:38 +03:00 · 2015-11-20 10:17:40 -06:00 · 2015-11-20 10:17:40 -06:00 · c5351fe5f1
commit c5351fe5f1
parent c9785a7d51 566453f56d
35 changed files with 958 additions and 619 deletions
--- a/.gitignore
+++ b/.gitignore
@ -2,6 +2,7 @@
 # https://help.github.com/articles/ignoring-files
 # Example .gitignore files: https://github.com/github/gitignore

+_gh_pages
 *.log
 .sass-cache
 Thumbs.db
--- a/.npmignore
+++ b/.npmignore
@ -0,0 +1,18 @@
+demo\
+fonts\
+meteor\
+scripts\
+test\
+
+.editorconfig
+.gitignore
+.jshintrc
+.npmignore
+.travis.yml
+.versions
+bootstrap-elements.html
+bower.json
+CONTRIBUTING.md
+Gruntfile.js
+index.html
+package.js
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -1,11 +1,219 @@
-## Playground
+# Contributing to bootsrap-material-design

-Use this pen to test and develop new features of Material Design for Bootstrap:
+Looking to contribute something to bootsrap-material-design? **Here's how you can help.**

-http://codepen.io/FezVrasta/pen/ihmea
+Please take a moment to review this document in order to make the contribution
+process easy and effective for everyone involved.

-It already includes every needed dependency and is based on the latest version of the theme.
+Following these guidelines helps to communicate that you respect the time of
+the developers managing and developing this open source project. In return,
+they should reciprocate that respect in addressing your issue or assessing
+patches and features.

-## Grunt

-**Grunt!** Ok... when you edit something please run `grunt` to compile CSS and copy stuff in the correct folders. Thanks!
+## Using the issue tracker
+
+The [issue tracker](https://github.com/FezVrasta/bootstrap-material-design/issues) is
+the preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests)
+and [submitting pull requests](#pull-requests), but please respect the following
+restrictions:
+
+* Please **do not** use the issue tracker for personal support requests. Stack
+  Overflow ([`bootstrap-material-design`](https://stackoverflow.com/questions/tagged/bootstrap-material-design) tag) is the best place to get help.
+
+* Please **do not** derail or troll issues. Keep the discussion on topic and
+  respect the opinions of others.
+
+* Please **do not** open issues or pull requests regarding the code in dependencies such as:
+  [`Bootstrap`](https://github.com/twbs/bootstrap) (open them in their respective repositories).
+  
+* Please **close your own issue** once it is resolved.
+
+
+## Issues and labels
+
+Our bug tracker utilizes several labels to help organize and identify issues. Here's what they represent and how we use them:
+
+- `bug confirmed` - Issues that have been confirmed with a reduced test case and identify a bug in Bootstrap.
+- `docs & examples` - Issues for improving or updating our documentation or examples.
+- `feature` - Issues asking for a new feature to be added, or an existing one to be extended or modified. New features require a minor version bump (e.g., `v3.0.0` to `v3.1.0`).
+- `enhancement` - Issues for improving existing features
+- `grunt` - Issues with our included JavaScript-based Gruntfile, which is used to run all our tests, concatenate and compile source files, and more.
+- `help wanted` - Issues we need or would love help from the community to resolve.
+- `js` - Issues stemming from our compiled or source JavaScript files.
+
+For a complete look at our labels, see the [project labels page](https://github.com/FezVrasta/bootstrap-material-design/labels).
+
+
+## Bug reports
+
+A bug is a _demonstrable problem_ that is caused by the code in the repository.
+Good bug reports are extremely helpful, so thanks!
+
+Guidelines for bug reports:
+
+0. **Validate and lint your code** &mdash; [validate your HTML](http://html5.validator.nu)
+   and [lint your HTML](https://github.com/twbs/bootlint) to ensure your
+   problem isn't caused by a simple error in your own code.
+
+1. **Use the GitHub issue search** &mdash; check if the issue has already been
+   reported.
+
+2. **Check if the issue has been fixed** &mdash; try to reproduce it using the
+   latest `master` or development branch in the repository.
+
+3. **Isolate the problem** &mdash; ideally create a [reduced test
+   case](https://css-tricks.com/reduced-test-cases/) and a live example.
+   [This CodePen](http://codepen.io/rosskevin/pen/VvRgrN) is a starter template.
+
+
+A good bug report shouldn't leave others needing to chase you up for more
+information. Please try to be as detailed as possible in your report. What is
+your environment? What steps will reproduce the issue? What browser(s) and OS
+experience the problem? Do other browsers show the bug differently? What
+would you expect to be the outcome? All these details will help people to fix
+any potential bugs.
+
+Example:
+
+> Short and descriptive example bug report title
+>
+> A summary of the issue and the browser/OS environment in which it occurs. If
+> suitable, include the steps required to reproduce the bug.
+>
+> 1. This is the first step
+> 2. This is the second step
+> 3. Further steps, etc.
+>
+> `<url>` - a link to the reduced test case (via the [CodePen template](http://codepen.io/rosskevin/pen/VvRgrN))
+>
+> Any other information you want to share that is relevant to the issue being
+> reported. This might include the lines of code that you have identified as
+> causing the bug, and potential solutions (and your opinions on their
+> merits).
+
+
+## Feature requests
+
+Feature requests are welcome. But take a moment to find out whether your idea
+fits with the scope and aims of the project and the [Google Material Design specification itself](http://www.google.com/design/spec/material-design/introduction.html). It's up to *you* to make a strong
+case to convince the project's developers of the merits of this feature. Please
+provide as much detail and context as possible.
+
+
+## Pull requests
+
+Good pull requests—patches, improvements, new features—are a fantastic
+help. They should remain focused in scope and avoid containing unrelated
+commits.
+
+**Please ask first** before embarking on any significant pull request (e.g.
+implementing features, refactoring code, porting to a different language),
+otherwise you risk spending a lot of time working on something that the
+project's developers might not want to merge into the project.
+
+Please adhere to the [coding guidelines](#code-guidelines) used throughout the
+project (indentation, accurate comments, etc.) and any other requirements
+(such as test coverage).
+
+**In general, do not edit `dist` or `sass` files
+directly!** Those files are automatically generated. You should edit the
+source files in [`/less/`](https://github.com/FezVrasta/bootstrap-material-design/tree/master/less)
+and/or [`/scripts/`](https://github.com/FezVrasta/bootstrap-material-design/tree/master/scripts) instead.
+
+Similarly, when contributing to Bootstrap's documentation, you should edit the
+documentation source files in
+[the `/bootstrap/docs/` directory of the `master` branch](https://github.com/FezVrasta/bootstrap-material-design/tree/master/docs).
+**Do not edit the `gh-pages` branch.** That branch is generated from the
+documentation source files and is managed separately by the bootstrap-material-design Team.
+
+Adhering to the following process is the best way to get your work
+included in the project:
+
+1. [Fork](https://help.github.com/fork-a-repo/) the project, clone your fork,
+   and configure the remotes:
+
+   ```bash
+   # Clone your fork of the repo into the current directory
+   git clone https://github.com/<your-username>/bootstrap-material-design.git
+   # Navigate to the newly cloned directory
+   cd bootstrap
+   # Assign the original repo to a remote called "upstream"
+   git remote add upstream https://github.com/FezVrasta/bootstrap-material-design.git
+   ```
+
+2. If you cloned a while ago, get the latest changes from upstream:
+
+   ```bash
+   git checkout master
+   git pull upstream master
+   ```
+
+3. Create a new topic branch (off the main project development branch) to
+   contain your feature, change, or fix:
+
+   ```bash
+   git checkout -b <topic-branch-name>
+   ```
+
+4. Commit your changes in logical chunks with messages written in english. Please adhere to these [git commit
+   message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
+   or your code is unlikely be merged into the main project. Use Git's
+   [interactive rebase](https://help.github.com/articles/interactive-rebase)
+   feature to tidy up your commits before making them public.
+
+5. Locally merge (or rebase) the upstream development branch into your topic branch:
+
+   ```bash
+   git pull [--rebase] upstream master
+   ```
+
+6. Push your topic branch up to your fork:
+
+   ```bash
+   git push origin <topic-branch-name>
+   ```
+
+7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/)
+    with a clear title and description against the `master` branch.
+
+**IMPORTANT**: By submitting a patch, you agree to allow the project owners to
+license your work under the terms of the [MIT License](LICENSE) (if it
+includes code changes) and under the terms of the
+[Creative Commons Attribution 3.0 Unported License](docs/LICENSE)
+(if it includes documentation changes).
+
+
+## Code guidelines
+
+### HTML
+
+[Adhere to the Code Guide.](http://codeguide.co/#html)
+
+- Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags).
+- Use CDNs and HTTPS for third-party JS when possible. We don't use protocol-relative URLs in this case because they break when viewing the page locally via `file://`.
+- Use [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) attributes in documentation examples to promote accessibility.
+
+### CSS
+
+[Adhere to the Code Guide.](http://codeguide.co/#css)
+
+- When feasible, default color palettes should comply with [WCAG color contrast guidelines](http://www.w3.org/TR/WCAG20/#visual-audio-contrast).
+- Except in rare cases, don't remove default `:focus` styles (via e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](http://a11yproject.com/posts/never-remove-css-outlines/) for more details.
+
+### JS
+
+- No semicolons (in client-side JS)
+- 2 spaces (no tabs)
+- strict mode
+- "Attractive"
+
+### Checking coding style
+
+Run `grunt build` before committing to ensure your changes follow our coding standards.
+
+
+## License
+
+By contributing your code, you agree to license your contribution under the [MIT License](LICENSE).
+By contributing to the documentation, you agree to license your contribution under the [Creative Commons Attribution 3.0 Unported License](docs/LICENSE).
--- a/README.md
+++ b/README.md
@ -33,7 +33,7 @@ You need to copy the `dist/` folder to the root of your project, ensuring that a

 ### 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.
+The only difference is that `material-fullpalette.css` has the full colors palette available (large file), the other one has just the primary colors (small file).

 ### Use custom color as primary

@ -50,33 +50,33 @@ You can do it by creating a less file in your project:

 Then, compiling this file, the entire theme will be compiled using the color chosen by you.

-## Development
+## Support

-We are using Grunt to automate the workflow and build process. Ensure you have nodejs installed and grunt-cli installed globally.
-After cloning the repo, run `npm install` to ensure you have all dev dependencies.
-
-Run the `grunt build` command to run the tests and compile the less/sass. See [Gruntfile.js](Gruntfile.js) for details on targets.
-
-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
-
-The bootstrap 3.x compatible version (master) is developed using LESS, with an automated conversion to SASS.
-
-The upcoming 4.x version (no branch yet) will be developed using SASS.
-
-## Support me
-
-If you like this project you may support me by donating something on Gittip, starring this repository or reporting bugs and ideas in the issue section.
+If you like this project you may support it by donating via Gittip, starring this repository or reporting issues.  All issues filed should be reduced to a [CodePen](http://codepen.io/rosskevin/pen/VvRgrN) test case where possible.

 [![gittip](demo/imgs/gittip-button.jpg)](https://www.gratipay.com/FezVrasta/)
 [![issues](demo/imgs/issues-button.jpg)](https://github.com/FezVrasta/bootstrap-material-design/issues)

 ## Contribute

-Please see the [CONTRIBUTING.md](CONTRIBUTING.md) file.
+Please see the [CONTRIBUTING.md](CONTRIBUTING.md) file.  
+
+## Development
+
+We are using Grunt to automate the workflow and build process. Ensure you have nodejs installed and grunt-cli installed globally.
+After cloning the repo, run `npm install` to ensure you have all dev dependencies.
+
+### Grunt
+
+- `grunt build` - run the tests and compile the less/sass. See [Gruntfile.js](Gruntfile.js) for details on targets.
+- `grunt test` - browser-based Jasmine unit tests.
+- `grunt serve` - build and fire up an http server with live-reload and a watch for development purposes.
+
+### LESS & SASS
+
+The bootstrap 3.x compatible version (master) is developed using LESS, with an automated conversion to SASS.
+
+The upcoming 4.x version (no branch yet) will be developed using SASS.


 ## Documentation
@ -248,9 +248,9 @@ Cards will adapt to column's width. The card below will have width equal to col-
 </div>
 ```

-## Material.js
+## material.js

-`Material.js` is a jQuery plugin that adds some magic to your markup and allows Material Design for Bootstrap to style some elements like inputs, checkboxes, radios etc.
+`material.js` is a jQuery plugin that adds some magic to your markup and allows Material Design for Bootstrap to style some elements like inputs, checkboxes, radios etc.

 ### Functions

@ -260,7 +260,7 @@ Cards will adapt to column's width. The card below will have width equal to col-
 * `$.material.checkbox():` will enable the MD style to the checkboxes (remember to follow the markup guidelines explained in the [Inputs section](#inputs).
 * `$.material.radio():` will enable the MD style to the checkboxes (remember to follow the markup guidelines explained in the Inputs section.

-### Apply Material.js only to specific elements
+### Apply only to specific elements

 Every function expects an optional value that will be used as a selector for the function; for example,
 `$.material.ripples("#selector, #foobar")` will apply Ripples.js only to `#selector` and `#foobar`.
@ -279,7 +279,7 @@ $.material.options = {

 ### Arrive.js support

-If you need to dynamically add elements to your DOM then you may need to include `Arrive.js` before `Material.js`. This will automatically apply `Material.js` to every new element added via JavaScript.
+If you need to dynamically add elements to your DOM then you may need to include `Arrive.js` before `Material.js`. This will automatically apply `material.js` to every new element added via JavaScript.

 ## Plugins

@ -323,3 +323,7 @@ Read more about [Bootstrap Material Datepicker](https://github.com/T00rk/bootstr
 ## Compatibility

 Currently, Material Design for Bootstrap supports Google Chrome (tested v37+), Mozilla Firefox (tested 30+), and Internet Explorer (tested 11+). Mobile browsers are not currently tested but they may work.
+
+
+## License
+[MIT License](LICENSE) 
--- a/bootstrap-elements.html
+++ b/bootstrap-elements.html
@ -1891,6 +1891,7 @@
                <div class="col-lg-10">
                  <input type="password" class="form-control" id="inputPassword" placeholder="Password">

+                  <!--
                  <div class="checkbox">
                    <label>
                      <input type="checkbox"> Checkbox
@ -1906,6 +1907,28 @@
                      <input type="checkbox" checked> Toggle button
                    </label>
                  </div>
+                  -->
+                </div>
+              </div>
+              <div class="form-group" style="margin-top: 0;"> <!-- inline style is just to demo custom css to put checkbox below input above -->
+                <div class="col-lg-offset-2 col-lg-10">
+                  <div class="checkbox">
+                    <label>
+                      <input type="checkbox"> Checkbox
+                    </label>
+                    <label>
+                      <input type="checkbox" disabled> Disabled Checkbox
+                    </label>
+                  </div>
+                </div>
+              </div>
+              <div class="form-group">
+                <div class="col-lg-offset-2 col-lg-10">
+                  <div class="togglebutton">
+                    <label>
+                      <input type="checkbox" checked> Toggle button
+                    </label>
+                  </div>
                </div>
              </div>
              <div class="form-group">
--- a/dist/css/material-fullpalette.css
+++ b/dist/css/material-fullpalette.css
--- a/dist/css/material-fullpalette.css.map
+++ b/dist/css/material-fullpalette.css.map
--- a/dist/css/material-fullpalette.min.css
+++ b/dist/css/material-fullpalette.min.css
--- a/dist/css/material-fullpalette.min.css.map
+++ b/dist/css/material-fullpalette.min.css.map
--- a/dist/css/material.css
+++ b/dist/css/material.css
@ -2571,7 +2571,7 @@ Then, run this script to get the list.
  box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
 }
 body {
-  background-color: #EEEEEE;
+  background-color: #eeeeee;
 }
 body.inverse {
  background: #333333;
@ -2655,7 +2655,7 @@ body .well-default,
 body .jumbotron-default,
 .container .jumbotron-default,
 .container-fluid .jumbotron-default {
-  background-color: #FFF;
+  background-color: #ffffff;
 }
 body .well-black,
 .container .well-black,
@ -3874,21 +3874,6 @@ body .jumbotron-material-blue-grey,
 .form-horizontal .checkbox {
  padding-top: 20px;
 }
-.form-group .checkbox label {
-  font-size: 16px;
-  line-height: 1.42857143;
-  font-weight: normal;
-}
-.form-group.form-group-sm .checkbox label {
-  font-size: 11px;
-  line-height: 1.5;
-  font-weight: normal;
-}
-.form-group.form-group-lg .checkbox label {
-  font-size: 18px;
-  line-height: 1.3333333;
-  font-weight: normal;
-}
 .form-group .checkbox label {
  cursor: pointer;
  padding-left: 0;
@ -4493,21 +4478,6 @@ fieldset[disabled] .form-group .checkbox input[type=checkbox],
    opacity: 0;
  }
 }
-.form-group .togglebutton label {
-  font-size: 16px;
-  line-height: 1.42857143;
-  font-weight: normal;
-}
-.form-group.form-group-sm .togglebutton label {
-  font-size: 11px;
-  line-height: 1.5;
-  font-weight: normal;
-}
-.form-group.form-group-lg .togglebutton label {
-  font-size: 18px;
-  line-height: 1.3333333;
-  font-weight: normal;
-}
 .form-group .togglebutton {
  vertical-align: middle;
 }
@ -4537,7 +4507,7 @@ fieldset[disabled] .form-group .checkbox input[type=checkbox],
  height: 15px;
  background-color: rgba(80, 80, 80, 0.7);
  border-radius: 15px;
-  margin-right: 10px;
+  margin-right: 15px;
  transition: background 0.3s ease;
  vertical-align: middle;
 }
@ -4823,21 +4793,6 @@ fieldset[disabled] .form-group .checkbox input[type=checkbox],
 .form-horizontal .radio {
  margin-bottom: 10px;
 }
-.form-group .radio label {
-  font-size: 16px;
-  line-height: 1.42857143;
-  font-weight: normal;
-}
-.form-group.form-group-sm .radio label {
-  font-size: 11px;
-  line-height: 1.5;
-  font-weight: normal;
-}
-.form-group.form-group-lg .radio label {
-  font-size: 18px;
-  line-height: 1.3333333;
-  font-weight: normal;
-}
 .radio label {
  cursor: pointer;
  padding-left: 45px;
@ -5259,7 +5214,7 @@ output {
 }
 .form-group .form-control {
  border: 0;
-  background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2);
  background-size: 0 2px, 100% 1px;
  background-repeat: no-repeat;
  background-position: center bottom, center calc(100% - 1px);
@ -5270,15 +5225,15 @@ output {
  border-radius: 0;
 }
 .form-group .form-control::-moz-placeholder {
-  color: #BDBDBD;
+  color: #bdbdbd;
  font-weight: normal;
 }
 .form-group .form-control:-ms-input-placeholder {
-  color: #BDBDBD;
+  color: #bdbdbd;
  font-weight: normal;
 }
 .form-group .form-control::-webkit-input-placeholder {
-  color: #BDBDBD;
+  color: #bdbdbd;
  font-weight: normal;
 }
 .form-group .form-control[readonly],
@ -5289,11 +5244,11 @@ fieldset[disabled] .form-group .form-control {
 .form-group .form-control[disabled],
 fieldset[disabled] .form-group .form-control {
  background-image: none;
-  border-bottom: 1px dotted #D2D2D2;
+  border-bottom: 1px dotted #d2d2d2;
 }
 .form-group.is-focused .form-control {
  outline: none;
-  background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2);
  background-size: 100% 2px, 100% 1px;
  box-shadow: none;
  transition-duration: 0.3s;
@ -5308,9 +5263,12 @@ fieldset[disabled] .form-group .form-control {
  pointer-events: none;
  transition: 0.3s ease all;
 }
+.form-group label,
 .form-group label.control-label {
-  color: #BDBDBD;
+  color: #bdbdbd;
  font-weight: normal;
+}
+.form-group label.control-label {
  margin: 16px 0 0 0;
 }
 .form-group.label-placeholder:not(.is-empty) label.control-label {
@ -5318,7 +5276,7 @@ fieldset[disabled] .form-group .form-control {
 }
 .form-group label.control-label,
 .form-group-default label.control-label {
-  color: #BDBDBD;
+  color: #bdbdbd;
 }
 .form-group-black label.control-label {
  color: #000000;
@ -5488,7 +5446,7 @@ fieldset[disabled] .form-group .form-control {
 }
 .form-group.is-focused.label-placeholder label.control-label,
 .form-group-default.is-focused.label-placeholder label.control-label {
-  color: #BDBDBD;
+  color: #bdbdbd;
 }
 .form-group-black.is-focused.label-placeholder label.control-label {
  color: #000000;
@ -5587,6 +5545,11 @@ fieldset[disabled] .form-group .form-control {
  margin-top: 0px;
  font-size: 12px;
 }
+.form-group label {
+  font-size: 16px;
+  line-height: 1.42857143;
+  font-weight: normal;
+}
 .form-group label.control-label {
  font-size: 12px;
  line-height: 1.07142857;
@ -5597,9 +5560,14 @@ fieldset[disabled] .form-group .form-control {
  font-size: 16px;
  line-height: 1.42857143;
 }
+.form-group.label-static ~ label.control-label,
+.form-group.label-floating.is-focused ~ label.control-label,
+.form-group.label-floating:not(.is-empty) ~ label.control-label,
+.form-group.label-floating input.form-control:-webkit-autofill ~ label.control-label,
 .form-group.label-static label.control-label,
 .form-group.label-floating.is-focused label.control-label,
-.form-group.label-floating:not(.is-empty) label.control-label {
+.form-group.label-floating:not(.is-empty) label.control-label,
+.form-group.label-floating input.form-control:-webkit-autofill label.control-label {
  top: -30px;
  left: 0;
  font-size: 12px;
@ -5625,6 +5593,11 @@ fieldset[disabled] .form-group .form-control {
  margin-top: 0px;
  font-size: 9px;
 }
+.form-group.form-group-sm label {
+  font-size: 11px;
+  line-height: 1.5;
+  font-weight: normal;
+}
 .form-group.form-group-sm label.control-label {
  font-size: 9px;
  line-height: 1.125;
@ -5635,9 +5608,14 @@ fieldset[disabled] .form-group .form-control {
  font-size: 11px;
  line-height: 1.5;
 }
+.form-group.form-group-sm.label-static ~ label.control-label,
+.form-group.form-group-sm.label-floating.is-focused ~ label.control-label,
+.form-group.form-group-sm.label-floating:not(.is-empty) ~ label.control-label,
+.form-group.form-group-sm.label-floating input.form-control:-webkit-autofill ~ label.control-label,
 .form-group.form-group-sm.label-static label.control-label,
 .form-group.form-group-sm.label-floating.is-focused label.control-label,
-.form-group.form-group-sm.label-floating:not(.is-empty) label.control-label {
+.form-group.form-group-sm.label-floating:not(.is-empty) label.control-label,
+.form-group.form-group-sm.label-floating input.form-control:-webkit-autofill label.control-label {
  top: -25px;
  left: 0;
  font-size: 9px;
@ -5663,6 +5641,11 @@ fieldset[disabled] .form-group .form-control {
  margin-top: 0px;
  font-size: 14px;
 }
+.form-group.form-group-lg label {
+  font-size: 18px;
+  line-height: 1.3333333;
+  font-weight: normal;
+}
 .form-group.form-group-lg label.control-label {
  font-size: 14px;
  line-height: 0.99999998;
@ -5673,9 +5656,14 @@ fieldset[disabled] .form-group .form-control {
  font-size: 18px;
  line-height: 1.3333333;
 }
+.form-group.form-group-lg.label-static ~ label.control-label,
+.form-group.form-group-lg.label-floating.is-focused ~ label.control-label,
+.form-group.form-group-lg.label-floating:not(.is-empty) ~ label.control-label,
+.form-group.form-group-lg.label-floating input.form-control:-webkit-autofill ~ label.control-label,
 .form-group.form-group-lg.label-static label.control-label,
 .form-group.form-group-lg.label-floating.is-focused label.control-label,
-.form-group.form-group-lg.label-floating:not(.is-empty) label.control-label {
+.form-group.form-group-lg.label-floating:not(.is-empty) label.control-label,
+.form-group.form-group-lg.label-floating input.form-control:-webkit-autofill label.control-label {
  top: -32px;
  left: 0;
  font-size: 14px;
@ -5690,94 +5678,94 @@ fieldset[disabled] .form-group .form-control {
 }
 .form-group.is-focused .form-control,
 .form-group-default.is-focused .form-control {
-  background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group-black.is-focused .form-control {
-  background-image: linear-gradient(#000000, #000000), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#000000, #000000), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group-white.is-focused .form-control {
-  background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group-inverse.is-focused .form-control {
-  background-image: linear-gradient(#3f51b5, #3f51b5), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#3f51b5, #3f51b5), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group-primary.is-focused .form-control {
-  background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group-success.is-focused .form-control {
-  background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group-info.is-focused .form-control {
-  background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group-warning.is-focused .form-control {
-  background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group-danger.is-focused .form-control {
-  background-image: linear-gradient(#f44336, #f44336), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#f44336, #f44336), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group-material-red.is-focused .form-control {
-  background-image: linear-gradient(#f44336, #f44336), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#f44336, #f44336), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group-material-pink.is-focused .form-control {
-  background-image: linear-gradient(#e91e63, #e91e63), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#e91e63, #e91e63), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group-material-purple.is-focused .form-control {
-  background-image: linear-gradient(#9c27b0, #9c27b0), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#9c27b0, #9c27b0), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group-material-deep-purple.is-focused .form-control {
-  background-image: linear-gradient(#673ab7, #673ab7), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#673ab7, #673ab7), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group-material-indigo.is-focused .form-control {
-  background-image: linear-gradient(#3f51b5, #3f51b5), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#3f51b5, #3f51b5), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group-material-blue.is-focused .form-control {
-  background-image: linear-gradient(#2196f3, #2196f3), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#2196f3, #2196f3), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group-material-light-blue.is-focused .form-control {
-  background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group-material-cyan.is-focused .form-control {
-  background-image: linear-gradient(#00bcd4, #00bcd4), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#00bcd4, #00bcd4), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group-material-teal.is-focused .form-control {
-  background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group-material-green.is-focused .form-control {
-  background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group-material-light-green.is-focused .form-control {
-  background-image: linear-gradient(#8bc34a, #8bc34a), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#8bc34a, #8bc34a), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group-material-lime.is-focused .form-control {
-  background-image: linear-gradient(#cddc39, #cddc39), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#cddc39, #cddc39), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group-material-yellow.is-focused .form-control {
-  background-image: linear-gradient(#ffeb3b, #ffeb3b), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#ffeb3b, #ffeb3b), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group-material-amber.is-focused .form-control {
-  background-image: linear-gradient(#ffc107, #ffc107), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#ffc107, #ffc107), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group-material-orange.is-focused .form-control {
-  background-image: linear-gradient(#ff9800, #ff9800), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#ff9800, #ff9800), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group-material-deep-orange.is-focused .form-control {
-  background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group-material-brown.is-focused .form-control {
-  background-image: linear-gradient(#795548, #795548), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#795548, #795548), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group-material-grey.is-focused .form-control {
-  background-image: linear-gradient(#9e9e9e, #9e9e9e), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#9e9e9e, #9e9e9e), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group-material-blue-grey.is-focused .form-control {
-  background-image: linear-gradient(#607d8b, #607d8b), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#607d8b, #607d8b), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group.has-warning .form-control {
  box-shadow: none;
 }
 .form-group.has-warning.is-focused .form-control {
-  background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group.has-warning label.control-label,
 .form-group.has-warning .help-block {
@ -5787,7 +5775,7 @@ fieldset[disabled] .form-group .form-control {
  box-shadow: none;
 }
 .form-group.has-error.is-focused .form-control {
-  background-image: linear-gradient(#f44336, #f44336), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#f44336, #f44336), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group.has-error label.control-label,
 .form-group.has-error .help-block {
@ -5797,7 +5785,7 @@ fieldset[disabled] .form-group .form-control {
  box-shadow: none;
 }
 .form-group.has-success.is-focused .form-control {
-  background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group.has-success label.control-label,
 .form-group.has-success .help-block {
@ -5807,7 +5795,7 @@ fieldset[disabled] .form-group .form-control {
  box-shadow: none;
 }
 .form-group.has-info.is-focused .form-control {
-  background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#d2d2d2, #d2d2d2);
 }
 .form-group.has-info label.control-label,
 .form-group.has-info .help-block {
@ -5832,7 +5820,7 @@ select.form-control {
 }
 .form-group.is-focused select.form-control {
  box-shadow: none;
-  border-color: #D2D2D2;
+  border-color: #d2d2d2;
 }
 select.form-control[multiple],
 .form-group.is-focused select.form-control[multiple] {
@ -5865,6 +5853,18 @@ select.form-control[multiple],
  height: 100%;
  z-index: 100;
 }
+.form-horizontal .radio,
+.form-horizontal .checkbox,
+.form-horizontal .radio-inline,
+.form-horizontal .checkbox-inline {
+  padding-top: 0px;
+}
+.form-horizontal label {
+  text-align: right;
+}
+.form-horizontal label.control-label {
+  margin: 0;
+}
 legend {
  border-bottom: 0;
 }
@ -7896,7 +7896,7 @@ icon-material-blue-grey {
  /**************************************************************************/
  border-radius: 2px;
  color: rgba(0, 0, 0, 0.84);
-  background: #fff;
+  background: #ffffff;
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 .card .card-height-indicator {
@ -7925,7 +7925,7 @@ icon-material-blue-grey {
  position: absolute;
  bottom: 16px;
  left: 18px;
-  color: #fff;
+  color: #ffffff;
  font-size: 2em;
 }
 .card .card-body {
--- a/dist/css/material.css.map
+++ b/dist/css/material.css.map
--- a/dist/css/material.min.css
+++ b/dist/css/material.min.css
--- a/dist/css/material.min.css.map
+++ b/dist/css/material.min.css.map
--- a/dist/js/material.js
+++ b/dist/js/material.js
@ -18,6 +18,14 @@
    }
    return false;
  }
+  
+  function _addFormGroupFocus(element){
+    $(element).closest(".form-group").addClass("is-focused");
+  }
+  
+  function _removeFormGroupFocus(element){
+    $(element).closest(".form-group").removeClass("is-focused"); // remove class from form-group
+  }

  $.material =  {
    "options": {
@ -49,21 +57,21 @@
      $((selector) ? selector : this.options.checkboxElements)
      .filter(":notmdproc")
      .data("mdproc", true)
-      .after("<span class=checkbox-material><span class=check></span></span>");
+      .after("<span class='checkbox-material'><span class='check'></span></span>");
    },
    "togglebutton": function(selector) {
      // Add fake-checkbox to material checkboxes
      $((selector) ? selector : this.options.togglebuttonElements)
      .filter(":notmdproc")
      .data("mdproc", true)
-      .after("<span class=toggle></span>");
+      .after("<span class='toggle'></span>");
    },
    "radio": function(selector) {
      // Add fake-radio to material radios
      $((selector) ? selector : this.options.radioElements)
      .filter(":notmdproc")
      .data("mdproc", true)
-      .after("<span class=circle></span><span class=check></span>");
+      .after("<span class='circle'></span><span class='check'></span>");
    },
    "input": function(selector) {
      $((selector) ? selector : this.options.inputElements)
@ -125,6 +133,14 @@
      });
    },
    "attachInputEventHandlers": function() {
+
+      // checkboxes didn't appear to bubble to the document, so we'll bind these directly
+      $(".form-group .checkbox label").hover(function() {
+        _addFormGroupFocus(this);
+      }, function() {
+        _removeFormGroupFocus(this);
+      });
+
      $(document)
      .on("change", ".checkbox input[type=checkbox]", function() { $(this).blur(); })
      .on("keydown paste", ".form-control", function(e) {
@ -158,10 +174,10 @@
        }
      })
      .on("focus", ".form-control, .form-group.is-fileinput", function() {
-        $(this).closest(".form-group").addClass("is-focused"); // add class to form-group
+        _addFormGroupFocus(this);
      })
      .on("blur", ".form-control, .form-group.is-fileinput", function() {
-        $(this).closest(".form-group").removeClass("is-focused"); // remove class from form-group
+        _removeFormGroupFocus(this);
      })
      // make sure empty is added back when there is a programmatic value change.
      //  NOTE: programmatic changing of value using $.val() must trigger the change event i.e. $.val('x').trigger('change')
--- a/dist/js/material.min.js
+++ b/dist/js/material.min.js
--- a/dist/js/material.min.js.map
+++ b/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","$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"}
+{"version":3,"sources":["material.js"],"names":["$","_isChar","evt","which","ctrlKey","metaKey","altKey","_addFormGroupFocus","element","closest","addClass","_removeFormGroupFocus","removeClass","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","length","wrap","attr","removeAttr","legacySizes","input-lg","input-sm","legacySize","standardSize","hasClass","placeholder","id","forAttribute","val","append","find","attachInputEventHandlers","hover","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"}
--- a/index.html
+++ b/index.html
@ -218,72 +218,65 @@
            <pre><code>$.material.init()</code></pre>
          </div>
          <div class="well page" id="checkbox">
-            <h1 class="header">Checkbox</h1>
+            <h1 class="header">Checkbox <small>default checkboxes</small></h1>

            <!-- Simple checkbox with label -->
-            <div class="sample1">
+            <div class="form-group">
              <div class="checkbox">
                <label>
                  <input type="checkbox"> Notifications
                </label>
              </div>
-              <p class="hint">Notify me about updates to apps or games that I've downloaded</p>
+              <p class="help-block">Notify me about updates to apps or games that I've downloaded</p>
            </div>

            <!-- Simple checkbox with label, checked -->
-            <div class="sample1">
+            <div class="form-group">
              <div class="checkbox">
                <label>
                  <input type="checkbox" checked> Auto-updates
                </label>
              </div>
-              <p class="hint">Auto-update apps over wifi only</p>
+              <p class="help-block">Auto-update apps over wifi only</p>
            </div>

-            <!-- Simple checkbox with label -->
-            <div class="sample1">
-              <div class="checkbox">
-                <label>
-                  <input type="checkbox"> Clear search history
-                </label>
-              </div>
-              <p class="hint">Remove all the searches you have ever performed</p>
-            </div>
-
-            <h2>Sound</h2>

+            <h2>Sound <small>horizontal form with column label variations and <code>checkbox-primary</code> color</small></h2>
            <!-- Checkboxes with labels on the left -->
-            <div class="sample2">
-              <div class="text">Touch sounds</div>
-              <div class="checkbox checkbox-primary">
-                <label>
-                  <input type="checkbox" checked>
-                </label>
+
+            <form class="form-horizontal">
+              <div class="form-group">
+                <label class="col-sm-2" for="ch1">Touch sounds</label>
+                <div class="col-sm-10">
+                  <div class="checkbox checkbox-primary">
+                    <label>
+                      <input id="ch1" type="checkbox" checked>
+                    </label>
+                  </div>
+                  <p class="help-block">This shows the generic label variant.</p>
+                </div>
              </div>
-            </div>
-            <div class="sample2">
-              <div class="text">Screen lock sound</div>
-              <div class="checkbox checkbox-primary">
-                <label>
-                  <input type="checkbox">
-                </label>
+
+              <div class="form-group">
+                <label class="col-sm-2 control-label" for="ch3">Vibrate on touch</label>
+                <div class="col-sm-10">
+                  <div class="checkbox checkbox-primary">
+                    <label>
+                      <input id="ch3" type="checkbox">
+                    </label>
+                  </div>
+                  <p class="help-block">This shows the <code>control-label</code> variant.</p>
+                </div>
              </div>
-            </div>
-            <div class="sample2">
-              <div class="text">Vibrate on touch</div>
-              <div class="checkbox checkbox-primary">
-                <label>
-                  <input type="checkbox">
-                </label>
-              </div>
-            </div>
+
+            </form>
          </div>
          <div class="well page" id="radio-button">
            <h1 class="header">Checkbox</h1>

            <h2>Keep Wi-Fi on during sleep</h2>

-            <div class="sample1">
+            <div class="form-group">
              <div class="radio radio-success">
                <label>
                  <input type="radio" name="sample1" value="option1" checked="">
@ -373,6 +366,7 @@
              <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>

@ -391,6 +385,7 @@
              <form>
                <div class="form-group">
                  <label for="i5ps" class="control-label col-lg-2">Column label</label>
+
                  <div class="col-lg-10">
                    <input type="email" class="form-control" id="i5ps" placeholder="placeholder attribute">
                    <span class="help-block">This is a hint as a <code>span.help-block.hint</code></span>
@ -532,11 +527,13 @@
              <div class="form-group label-floating">
                <label for="555" class="control-label">label</label>
                <input type="text" class="form-control" id="555">
+
                <p class="help-block">Some helpful hint</p>
              </div>
              <div class="form-group label-floating">
                <label for="676" class="control-label">label</label>
                <input type="email" class="form-control" id="676">
+
                <p class="help-block">A valid email contains an @ character</p>
              </div>

--- a/less/_checkboxes.less
+++ b/less/_checkboxes.less
@ -5,17 +5,13 @@

 .form-group-checkbox-variant(@placeholder-font-size, @line-height){
  .checkbox {
-    label {
-      font-size: @placeholder-font-size;
-      line-height: @line-height;
-      font-weight: normal;
-    }
+    // Label is set in _inputs.less
  }
 }

 .form-group {

-  // default label size/location
+  //// default label size/location
  .form-group-checkbox-variant(@md-input-font-size-base, @md-input-line-height-base);

  // sm label size/location
--- a/less/_form.less
+++ b/less/_form.less
@ -0,0 +1,18 @@
+.form-horizontal {
+
+  // Consistent vertical alignment of radios and checkboxes
+  .radio,
+  .checkbox,
+  .radio-inline,
+  .checkbox-inline {
+    padding-top: 0px;
+  }
+
+  label {
+    text-align: right;
+  }
+
+  label.control-label {
+    margin: 0;
+  }
+}
--- a/less/_inputs-size.less
+++ b/less/_inputs-size.less
@ -1,6 +1,8 @@
 //
 // Forms - sizing - material - mirrors bootstrap/forms.less with custom sizing
 //
+// LEAVE THIS IDENTICAL TO THE BOOTSTRAP FILE - DO NOT CUSTOMIZE HERE.
+//
 // 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.
 // --------------------------------------------------
--- a/less/_inputs.less
+++ b/less/_inputs.less
@ -46,13 +46,20 @@
    font-size: @help-block-font-size;
  }

+  // generic labels used anywhere in the form (not control-label)
+  label {
+    font-size: @placeholder-font-size;
+    line-height: @line-height;
+    font-weight: normal;
+  }
+
  // smaller focused or static size
  label.control-label {
    font-size: @static-font-size;
    line-height: @static-line-height;
  }

-  // larger labels as placeholders
+    // larger labels as placeholders
  &.label-floating,
  &.label-placeholder {
    label.control-label {
@ -62,10 +69,12 @@
    }
  }

-  // static or focused floating labels
+  // static, focused, or autofill floating labels
  &.label-static,
  &.label-floating.is-focused,
-  &.label-floating:not(.is-empty) {
+  &.label-floating:not(.is-empty),
+  &.label-floating input.form-control:-webkit-autofill {
+    & ~ label.control-label, // #559 webkit chrome autofill `.form-group.label-floating input.form-control:-webkit-autofill ~ label.control-label`
    label.control-label {
      top: @label-top;
      left: 0;
@ -149,10 +158,16 @@
    }
  }

+  // generic labels and control labels
+  label,
  label.control-label {
    // same label properties as form-group placeholder
    color: @input-placeholder-color;
    font-weight: normal;
+  }
+
+  label.control-label {
+    // same label properties as form-group placeholder
    margin: 16px 0 0 0; // std and lg
  }

--- a/less/_material.less
+++ b/less/_material.less
@ -50,6 +50,8 @@ a, a:hover, a:focus {
 // Text inputs
@import "_inputs.less";

+@import "_form.less";
+
 legend {
  border-bottom: 0;
 }
@ -84,21 +86,7 @@ legend {
@import "_progress.less";

 // Typography
-.text-warning {
-  color: @btn-warning;
-}
-.text-primary {
-  color: @btn-primary;
-}
-.text-danger {
-  color: @btn-danger;
-}
-.text-success {
-  color: @btn-success;
-}
-.text-info {
-  color: @btn-info;
-}
+@import "_typography.less";

@import "_tabs.less";

--- a/less/_radios.less
+++ b/less/_radios.less
@ -4,11 +4,7 @@

 .form-group-radio-variant(@placeholder-font-size, @line-height){
  .radio {
-    label {
-      font-size: @placeholder-font-size;
-      line-height: @line-height;
-      font-weight: normal;
-    }
+    // Label is set in _inputs.less
  }
 }

@ -25,7 +21,7 @@
  // lg label size/location
  &.form-group-lg {
    .form-group-radio-variant(@md-input-font-size-large, @md-input-line-height-large);
-  }     
+  }
 }

 .radio {
--- a/less/_togglebutton.less
+++ b/less/_togglebutton.less
@ -1,16 +1,12 @@
 .form-group-toggle-variant(@placeholder-font-size, @line-height){
  .togglebutton {
-    label {
-      font-size: @placeholder-font-size;
-      line-height: @line-height;
-      font-weight: normal;
-    }
+    // Label is set in _inputs.less
  }
 }

 .form-group {

-  // default label size/location
+  //// default label size/location
  .form-group-toggle-variant(@md-input-font-size-base, @md-input-line-height-base);

  // sm label size/location
@ -47,7 +43,7 @@
        height: 15px;
        background-color: rgba(80, 80, 80, 0.7);
        border-radius: 15px;
-        margin-right: 10px;
+        margin-right: 15px;
        transition: background 0.3s ease;
        vertical-align: middle;
      }
--- a/less/_typography.less
+++ b/less/_typography.less
@ -0,0 +1,15 @@
+.text-warning {
+  color: @btn-warning;
+}
+.text-primary {
+  color: @btn-primary;
+}
+.text-danger {
+  color: @btn-danger;
+}
+.text-success {
+  color: @btn-success;
+}
+.text-info {
+  color: @btn-info;
+}
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "bootstrap-material-design",
-  "version": "0.4.0",
+  "version": "0.4.2",
  "description": "Material Design for Bootstrap 3",
  "main": "scripts/index.js",
  "scripts": {
--- a/sass/_checkboxes.scss
+++ b/sass/_checkboxes.scss
@ -7,17 +7,13 @@

@mixin form-group-checkbox-variant($placeholder-font-size, $line-height){
  .checkbox {
-    label {
-      font-size: $placeholder-font-size;
-      line-height: $line-height;
-      font-weight: normal;
-    }
+    // Label is set in _inputs.less
  }
 }

 .form-group {

-  // default label size/location
+  //// default label size/location
  @include form-group-checkbox-variant($md-input-font-size-base, $md-input-line-height-base);

  // sm label size/location
--- a/sass/_form.scss
+++ b/sass/_form.scss
@ -0,0 +1,20 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
+.form-horizontal {
+
+  // Consistent vertical alignment of radios and checkboxes
+  .radio,
+  .checkbox,
+  .radio-inline,
+  .checkbox-inline {
+    padding-top: 0px;
+  }
+
+  label {
+    text-align: right;
+  }
+
+  label.control-label {
+    margin: 0;
+  }
+}
--- a/sass/_inputs-size.scss
+++ b/sass/_inputs-size.scss
@ -3,6 +3,8 @@
 //
 // Forms - sizing - material - mirrors bootstrap/forms.less with custom sizing
 //
+// LEAVE THIS IDENTICAL TO THE BOOTSTRAP FILE - DO NOT CUSTOMIZE HERE.
+//
 // 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.
 // --------------------------------------------------
--- a/sass/_inputs.scss
+++ b/sass/_inputs.scss
@ -49,13 +49,20 @@
    font-size: $help-block-font-size;
  }

+  // generic labels used anywhere in the form (not control-label)
+  label {
+    font-size: $placeholder-font-size;
+    line-height: $line-height;
+    font-weight: normal;
+  }
+
  // smaller focused or static size
  label.control-label {
    font-size: $static-font-size;
    line-height: $static-line-height;
  }

-  // larger labels as placeholders
+    // larger labels as placeholders
  &.label-floating,
  &.label-placeholder {
    label.control-label {
@ -65,10 +72,12 @@
    }
  }

-  // static or focused floating labels
+  // static, focused, or autofill floating labels
  &.label-static,
  &.label-floating.is-focused,
-  &.label-floating:not(.is-empty) {
+  &.label-floating:not(.is-empty),
+  &.label-floating input.form-control:-webkit-autofill {
+    & ~ label.control-label, // #559 webkit chrome autofill `.form-group.label-floating input.form-control:-webkit-autofill ~ label.control-label`
    label.control-label {
      top: $label-top;
      left: 0;
@ -153,10 +162,16 @@
    }
  }

+  // generic labels and control labels
+  label,
  label.control-label {
    // same label properties as form-group placeholder
    color: $input-placeholder-color;
    font-weight: normal;
+  }
+
+  label.control-label {
+    // same label properties as form-group placeholder
    margin: 16px 0 0 0; // std and lg
  }

--- a/sass/_material.scss
+++ b/sass/_material.scss
@ -52,6 +52,8 @@ a, a:hover, a:focus {
 // Text inputs
@import '_inputs';

+@import '_form';
+
 legend {
  border-bottom: 0;
 }
@ -86,21 +88,7 @@ legend {
@import '_progress';

 // Typography
-.text-warning {
-  color: $btn-warning;
-}
-.text-primary {
-  color: $btn-primary;
-}
-.text-danger {
-  color: $btn-danger;
-}
-.text-success {
-  color: $btn-success;
-}
-.text-info {
-  color: $btn-info;
-}
+@import '_typography';

@import '_tabs';

--- a/sass/_radios.scss
+++ b/sass/_radios.scss
@ -6,11 +6,7 @@

@mixin form-group-radio-variant($placeholder-font-size, $line-height){
  .radio {
-    label {
-      font-size: $placeholder-font-size;
-      line-height: $line-height;
-      font-weight: normal;
-    }
+    // Label is set in _inputs.less
  }
 }

@ -27,7 +23,7 @@
  // lg label size/location
  &.form-group-lg {
    @include form-group-radio-variant($md-input-font-size-large, $md-input-line-height-large);
-  }     
+  }
 }

 .radio {
--- a/sass/_togglebutton.scss
+++ b/sass/_togglebutton.scss
@ -2,17 +2,13 @@

@mixin form-group-toggle-variant($placeholder-font-size, $line-height){
  .togglebutton {
-    label {
-      font-size: $placeholder-font-size;
-      line-height: $line-height;
-      font-weight: normal;
-    }
+    // Label is set in _inputs.less
  }
 }

 .form-group {

-  // default label size/location
+  //// default label size/location
  @include form-group-toggle-variant($md-input-font-size-base, $md-input-line-height-base);

  // sm label size/location
@ -49,7 +45,7 @@
        height: 15px;
        background-color: rgba(80, 80, 80, 0.7);
        border-radius: 15px;
-        margin-right: 10px;
+        margin-right: 15px;
        transition: background 0.3s ease;
        vertical-align: middle;
      }
--- a/sass/_typography.scss
+++ b/sass/_typography.scss
@ -0,0 +1,17 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
+.text-warning {
+  color: $btn-warning;
+}
+.text-primary {
+  color: $btn-primary;
+}
+.text-danger {
+  color: $btn-danger;
+}
+.text-success {
+  color: $btn-success;
+}
+.text-info {
+  color: $btn-info;
+}
--- a/scripts/material.js
+++ b/scripts/material.js
@ -18,6 +18,14 @@
    }
    return false;
  }
+  
+  function _addFormGroupFocus(element){
+    $(element).closest(".form-group").addClass("is-focused");
+  }
+  
+  function _removeFormGroupFocus(element){
+    $(element).closest(".form-group").removeClass("is-focused"); // remove class from form-group
+  }

  $.material =  {
    "options": {
@ -49,21 +57,21 @@
      $((selector) ? selector : this.options.checkboxElements)
      .filter(":notmdproc")
      .data("mdproc", true)
-      .after("<span class=checkbox-material><span class=check></span></span>");
+      .after("<span class='checkbox-material'><span class='check'></span></span>");
    },
    "togglebutton": function(selector) {
      // Add fake-checkbox to material checkboxes
      $((selector) ? selector : this.options.togglebuttonElements)
      .filter(":notmdproc")
      .data("mdproc", true)
-      .after("<span class=toggle></span>");
+      .after("<span class='toggle'></span>");
    },
    "radio": function(selector) {
      // Add fake-radio to material radios
      $((selector) ? selector : this.options.radioElements)
      .filter(":notmdproc")
      .data("mdproc", true)
-      .after("<span class=circle></span><span class=check></span>");
+      .after("<span class='circle'></span><span class='check'></span>");
    },
    "input": function(selector) {
      $((selector) ? selector : this.options.inputElements)
@ -125,6 +133,14 @@
      });
    },
    "attachInputEventHandlers": function() {
+
+      // checkboxes didn't appear to bubble to the document, so we'll bind these directly
+      $(".form-group .checkbox label").hover(function() {
+        _addFormGroupFocus(this);
+      }, function() {
+        _removeFormGroupFocus(this);
+      });
+
      $(document)
      .on("change", ".checkbox input[type=checkbox]", function() { $(this).blur(); })
      .on("keydown paste", ".form-control", function(e) {
@ -158,10 +174,10 @@
        }
      })
      .on("focus", ".form-control, .form-group.is-fileinput", function() {
-        $(this).closest(".form-group").addClass("is-focused"); // add class to form-group
+        _addFormGroupFocus(this);
      })
      .on("blur", ".form-control, .form-group.is-fileinput", function() {
-        $(this).closest(".form-group").removeClass("is-focused"); // remove class from form-group
+        _removeFormGroupFocus(this);
      })
      // make sure empty is added back when there is a programmatic value change.
      //  NOTE: programmatic changing of value using $.val() must trigger the change event i.e. $.val('x').trigger('change')