Solves #730 and #636 -

- labels adjusted for horizontal forms, and generic labels now set in inputs.less
- js added to set is-focused on checkbox form-groups when hovering
- markup samples for right, left checkbox labels plus help-blocks

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">

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;
@@ -5630,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;
@@ -5673,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;
@@ -5705,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 {
@@ -5802,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 {
@@ -5812,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 {
@@ -5822,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 {
@@ -5847,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] {
@@ -5880,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;
 }
@@ -7911,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 {
@@ -7940,7 +7925,7 @@ icon-material-blue-grey {
   position: absolute;
   bottom: 16px;
   left: 18px;
-  color: #fff;
+  color: #ffffff;
   font-size: 2em;
 }
 .card .card-body {

dist/js/material.js

@@ -19,6 +19,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": {
       // These options set what will be started by $.material.init()
@@ -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')

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"}

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>
+            <form class="form-horizontal">
-              <div class="checkbox checkbox-primary">
+              <div class="form-group">
-                <label>
+                <label class="col-sm-2" for="ch1">Touch sounds</label>
-                  <input type="checkbox" checked>
+                <div class="col-sm-10">
-                </label>
+                  <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="form-group">
-              <div class="text">Screen lock sound</div>
+                <label class="col-sm-2 control-label" for="ch3">Vibrate on touch</label>
-              <div class="checkbox checkbox-primary">
+                <div class="col-sm-10">
-                <label>
+                  <div class="checkbox checkbox-primary">
-                  <input type="checkbox">
+                    <label>
-                </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">
+            </form>
-              <div class="text">Vibrate on touch</div>
-              <div class="checkbox checkbox-primary">
-                <label>
-                  <input type="checkbox">
-                </label>
-              </div>
-            </div>
           </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>
 

less/_checkboxes.less

@@ -5,17 +5,13 @@
 
 .form-group-checkbox-variant(@placeholder-font-size, @line-height){
   .checkbox {
-    label {
+    // Label is set in _inputs.less
-      font-size: @placeholder-font-size;
-      line-height: @line-height;
-      font-weight: normal;
-    }
   }
 }
 
 .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

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;
+  }
+}

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.
 // --------------------------------------------------

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 {
@@ -151,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
   }
 

less/_material.less

@@ -50,6 +50,8 @@ a, a:hover, a:focus {
 // Text inputs
 @import "_inputs.less";
 
+@import "_form.less";
+
 legend {
   border-bottom: 0;
 }

less/_radios.less

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

less/_togglebutton.less

@@ -1,16 +1,12 @@
 .form-group-toggle-variant(@placeholder-font-size, @line-height){
   .togglebutton {
-    label {
+    // Label is set in _inputs.less
-      font-size: @placeholder-font-size;
-      line-height: @line-height;
-      font-weight: normal;
-    }
   }
 }
 
 .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;
       }

package.json

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

sass/_checkboxes.scss

@@ -7,17 +7,13 @@
 
 @mixin form-group-checkbox-variant($placeholder-font-size, $line-height){
   .checkbox {
-    label {
+    // Label is set in _inputs.less
-      font-size: $placeholder-font-size;
-      line-height: $line-height;
-      font-weight: normal;
-    }
   }
 }
 
 .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

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;
+  }
+}

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.
 // --------------------------------------------------

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 {
@@ -70,7 +77,7 @@
   &.label-floating.is-focused,
   &.label-floating:not(.is-empty),
   &.label-floating input.form-control:-webkit-autofill {
-    & ~ label.control-label, // #559 webkit chrome autofill - input.form-control:-webkit-autofill ~ label.control-label
+    & ~ 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;
@@ -155,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
   }
 

sass/_material.scss

@@ -52,6 +52,8 @@ a, a:hover, a:focus {
 // Text inputs
 @import '_inputs';
 
+@import '_form';
+
 legend {
   border-bottom: 0;
 }

sass/_radios.scss

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

sass/_togglebutton.scss

@@ -2,17 +2,13 @@
 
 @mixin form-group-toggle-variant($placeholder-font-size, $line-height){
   .togglebutton {
-    label {
+    // Label is set in _inputs.less
-      font-size: $placeholder-font-size;
-      line-height: $line-height;
-      font-weight: normal;
-    }
   }
 }
 
 .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;
       }

scripts/material.js

@@ -19,6 +19,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": {
       // These options set what will be started by $.material.init()
@@ -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')