0.5.5

.gitignore

@@ -35,3 +35,4 @@ scripts
 meteor
 bower.json
 testcase.html
+package.js

dist/css/bootstrap-material-design.css

@@ -85,6 +85,21 @@ a:hover .material-icons,
 a:focus .material-icons {
   vertical-align: middle;
 }
+.form-horizontal .radio,
+.form-horizontal .checkbox,
+.form-horizontal .radio-inline,
+.form-horizontal .checkbox-inline {
+  padding-top: 0;
+}
+.form-horizontal .radio {
+  margin-bottom: 10px;
+}
+.form-horizontal label {
+  text-align: right;
+}
+.form-horizontal label.control-label {
+  margin: 0;
+}
 body .container .well.well-sm,
 body .container-fluid .well.well-sm {
   padding: 10px;
@@ -787,7 +802,14 @@ fieldset[disabled][disabled] .btn-group-vertical.btn-group-raised:focus:not(:act
 .checkbox label {
   cursor: pointer;
   padding-left: 0;
-  color: rgba(0, 0, 0, 0.54);
+  color: rgba(0,0,0, 0.26);
+}
+.form-group.is-focused .checkbox label {
+  color: rgba(0,0,0, 0.26);
+}
+.form-group.is-focused .checkbox label:hover,
+.form-group.is-focused .checkbox label:focus {
+  color: rgba(0,0,0, .54);
 }
 .checkbox input[type=checkbox] {
   opacity: 0;
@@ -825,7 +847,7 @@ fieldset[disabled][disabled] .btn-group-vertical.btn-group-raised:focus:not(:act
   display: inline-block;
   width: 20px;
   height: 20px;
-  border: 2px solid rgba(0, 0, 0, 0.54);
+  border: 2px solid rgba(0,0,0, .54);
   overflow: hidden;
   z-index: 1;
 }
@@ -863,11 +885,11 @@ fieldset[disabled][disabled] .btn-group-vertical.btn-group-raised:focus:not(:act
   opacity: 0.2;
 }
 .checkbox input[type=checkbox]:checked + .checkbox-material .check {
-  color: #4caf50;
+  color: #009688;
-  border-color: #4caf50;
+  border-color: #009688;
 }
 .checkbox input[type=checkbox]:checked + .checkbox-material .check:before {
-  color: #4caf50;
+  color: #009688;
   -webkit-box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
           box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
   -webkit-animation: checkbox-on 0.3s forwards;
@@ -1205,7 +1227,14 @@ fieldset[disabled] .checkbox input[type=checkbox],
 }
 .togglebutton label {
   cursor: pointer;
-  color: rgba(0, 0, 0, 0.54);
+  color: rgba(0,0,0, 0.26);
+}
+.form-group.is-focused .togglebutton label {
+  color: rgba(0,0,0, 0.26);
+}
+.form-group.is-focused .togglebutton label:hover,
+.form-group.is-focused .togglebutton label:focus {
+  color: rgba(0,0,0, .54);
 }
 .togglebutton label input[type=checkbox] {
   opacity: 0;
@@ -1271,7 +1300,14 @@ fieldset[disabled] .checkbox input[type=checkbox],
   cursor: pointer;
   padding-left: 45px;
   position: relative;
-  color: rgba(0, 0, 0, 0.54);
+  color: rgba(0,0,0, 0.26);
+}
+.form-group.is-focused .radio label {
+  color: rgba(0,0,0, 0.26);
+}
+.form-group.is-focused .radio label:hover,
+.form-group.is-focused .radio label:focus {
+  color: rgba(0,0,0, .54);
 }
 .radio label span {
   display: block;
@@ -1283,7 +1319,7 @@ fieldset[disabled] .checkbox input[type=checkbox],
           transition-duration: 0.2s;
 }
 .radio label .circle {
-  border: 2px solid rgba(0, 0, 0, 0.54);
+  border: 2px solid rgba(0,0,0, .54);
   height: 15px;
   width: 15px;
   border-radius: 100%;
@@ -2005,21 +2041,6 @@ 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: 0;
-}
-.form-horizontal .radio {
-  margin-bottom: 10px;
-}
-.form-horizontal label {
-  text-align: right;
-}
-.form-horizontal label.control-label {
-  margin: 0;
-}
 legend {
   border-bottom: 0;
 }
@@ -3308,21 +3329,15 @@ hr.on-light {
 .selectize-control.multi .dropdown-active ~ .selectize-dropdown {
   display: block;
 }
-.dropdownjs:after {
+.dropdownjs::after {
   right: 5px;
   top: 3px;
   font-size: 25px;
   position: absolute;
-  content: "\e8ac";
+  font-family: 'Material Icons';
-  font-family: "Material-Design-Icons";
-  speak: none;
   font-style: normal;
-  font-weight: normal;
+  font-weight: 400;
-  font-variant: normal;
+  content: "\e5c5";
-  text-transform: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
   pointer-events: none;
   color: #757575;
 }

dist/js/material.js

@@ -18,11 +18,11 @@
     }
     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
   }
@@ -62,17 +62,32 @@
     },
     "togglebutton": function(selector) {
       // Add fake-checkbox to material checkboxes
-      $((selector) ? selector : this.options.togglebuttonElements)
+      var $input = $((selector) ? selector : this.options.togglebuttonElements)
       .filter(":notmdproc")
       .data("mdproc", true)
       .after("<span class='toggle'></span>");
+
+      var $formGroup = $input.closest(".form-group"); // note that form-group may be grandparent in the case of an input-group
+      $formGroup.find('label').hover(function() {
+        _addFormGroupFocus(this);
+      }, function() {
+        _removeFormGroupFocus(this);
+      });
     },
     "radio": function(selector) {
       // Add fake-radio to material radios
-      $((selector) ? selector : this.options.radioElements)
+      var $input = $((selector) ? selector : this.options.radioElements)
       .filter(":notmdproc")
       .data("mdproc", true)
       .after("<span class='circle'></span><span class='check'></span>");
+
+
+      var $formGroup = $input.closest(".form-group"); // note that form-group may be grandparent in the case of an input-group
+      $formGroup.find('label').hover(function() {
+        _addFormGroupFocus(this);
+      }, function() {
+        _removeFormGroupFocus(this);
+      });
     },
     "input": function(selector) {
       $((selector) ? selector : this.options.inputElements)

index.html

@@ -226,12 +226,12 @@
               <p class="help-block">Auto-update apps over wifi only</p>
             </div>
 
-            <h2>Horizontal form <small>with column label variations and <code>checkbox-primary</code> color</small></h2>
+            <h2>Horizontal form with column label variations</h2>
             <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">
+                  <div class="checkbox">
                     <label>
                       <input id="ch1" type="checkbox" checked>
                     </label>
@@ -242,7 +242,7 @@
               <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">
+                  <div class="checkbox">
                     <label>
                       <input id="ch3" type="checkbox">
                     </label>
@@ -284,15 +284,15 @@
               </label>
             </div>
 
-            <h2><small><code>.radio-success</code> inside a <code>.form-group</code></small></h2>
+            <h2>Default inside a <small><code>.form-group</code></small></h2>
             <div class="form-group">
-              <div class="radio radio-success">
+              <div class="radio">
                 <label>
                   <input type="radio" name="sample1" value="option1" checked="">
                   Always
                 </label>
               </div>
-              <div class="radio radio-success">
+              <div class="radio">
                 <label>
                   <input type="radio" name="sample1" value="option1">
                   Only when plugged in
@@ -300,20 +300,6 @@
               </div>
             </div>
 
-            <h2><small><code>.radio-primary</code> outside a <code>.form-group</code></small></h2>
-            <div class="radio radio-primary">
-              <label>
-                <input type="radio" name="sample2" value="option1" checked="">
-                Auto
-              </label>
-            </div>
-            <div class="radio radio-primary">
-              <label>
-                <input type="radio" name="sample2" value="option1">
-                5 GHz only
-              </label>
-            </div>
-
           </div>
           <div class="well page" id="toggle-button">