0.5.6

dist/css/bootstrap-material-design.css

@@ -811,6 +811,9 @@ fieldset[disabled][disabled] .btn-group-vertical.btn-group-raised:focus:not(:act
 .form-group.is-focused .checkbox label:focus {
   color: rgba(0,0,0, .54);
 }
+fieldset[disabled] .form-group.is-focused .checkbox label {
+  color: rgba(0,0,0, 0.26);
+}
 .checkbox input[type=checkbox] {
   opacity: 0;
   position: absolute;
@@ -1236,6 +1239,9 @@ fieldset[disabled] .checkbox input[type=checkbox],
 .form-group.is-focused .togglebutton label:focus {
   color: rgba(0,0,0, .54);
 }
+fieldset[disabled] .form-group.is-focused .togglebutton label {
+  color: rgba(0,0,0, 0.26);
+}
 .togglebutton label input[type=checkbox] {
   opacity: 0;
   width: 0;
@@ -1309,6 +1315,9 @@ fieldset[disabled] .checkbox input[type=checkbox],
 .form-group.is-focused .radio label:focus {
   color: rgba(0,0,0, .54);
 }
+fieldset[disabled] .form-group.is-focused .radio label {
+  color: rgba(0,0,0, 0.26);
+}
 .radio label span {
   display: block;
   position: absolute;
@@ -2962,9 +2971,9 @@ hr.on-light {
   -webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
           box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
   height: 0;
-  -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s;
-       -o-transition: -o-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s;
-          transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s;
+  -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, padding 0s linear 0.2s, height 0s linear 0.2s;
+       -o-transition: -o-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, padding 0s linear 0.2s, height 0s linear 0.2s;
+          transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, padding 0s linear 0.2s, height 0s linear 0.2s;
   -webkit-transform: translateY(200%);
       -ms-transform: translateY(200%);
        -o-transform: translateY(200%);
@@ -2974,9 +2983,9 @@ hr.on-light {
   padding: 14px 15px;
   margin-bottom: 20px;
   height: auto;
-  -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s;
-       -o-transition: -o-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s;
-          transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s;
+  -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, height 0s linear 0.2s;
+       -o-transition: -o-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, height 0s linear 0.2s;
+          transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, height 0s linear 0.2s;
   -webkit-transform: none;
       -ms-transform: none;
        -o-transform: none;

dist/js/material.js

@@ -14,13 +14,38 @@
     if (typeof evt.which == "undefined") {
       return true;
     } else if (typeof evt.which == "number" && evt.which > 0) {
-      return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8 && evt.which != 9;
+      return (
+        !evt.ctrlKey
+        && !evt.metaKey
+        && !evt.altKey
+        && evt.which != 8  // backspace
+        && evt.which != 9  // tab
+        && evt.which != 13 // enter
+        && evt.which != 16 // shift
+        && evt.which != 17 // ctrl
+        && evt.which != 20 // caps lock
+        && evt.which != 27 // escape
+      );
     }
     return false;
   }
 
   function _addFormGroupFocus(element) {
-    $(element).closest(".form-group").addClass("is-focused");
+    var $element = $(element);
+    if (!$element.prop('disabled')) {  // this is showing as undefined on chrome but works fine on firefox??
+      $element.closest(".form-group").addClass("is-focused");
+    }
+  }
+
+  function _toggleTypeFocus($input) {
+    $input.closest('label').hover(function () {
+      var $i = $(this).find('input');
+      if (!$i.prop('disabled')) { // hack because the _addFormGroupFocus() wasn't identifying the property on chrome
+        _addFormGroupFocus($i);     // need to find the input so we can check disablement
+      }
+    }, function () {
+      _removeFormGroupFocus($(this).find('input'));
+    });
   }
 
   function _removeFormGroupFocus(element) {
@@ -55,10 +80,12 @@
     },
     "checkbox": function (selector) {
       // Add fake-checkbox to material checkboxes
-      $((selector) ? selector : this.options.checkboxElements)
+      var $input = $((selector) ? selector : this.options.checkboxElements)
         .filter(":notmdproc")
         .data("mdproc", true)
         .after("<span class='checkbox-material'><span class='check'></span></span>");
+
+      _toggleTypeFocus($input);
     },
     "togglebutton": function (selector) {
       // Add fake-checkbox to material checkboxes
@@ -67,12 +94,7 @@
         .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);
-      });
+      _toggleTypeFocus($input);
     },
     "radio": function (selector) {
       // Add fake-radio to material radios
@@ -81,13 +103,7 @@
         .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);
-      });
+      _toggleTypeFocus($input);
     },
     "input": function (selector) {
       $((selector) ? selector : this.options.inputElements)
@@ -151,15 +167,10 @@
     "attachInputEventHandlers": function () {
       var validate = this.options.validate;
 
-      // 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("change", ".checkbox input[type=checkbox]", function () {
+          $(this).blur();
+        })
         .on("keydown paste", ".form-control", function (e) {
           if (_isChar(e)) {
             $(this).closest(".form-group").removeClass("is-empty");
@@ -170,7 +181,7 @@
           var $formGroup = $input.closest(".form-group");
           var isValid = (typeof $input[0].checkValidity === "undefined" || $input[0].checkValidity());
 
-        if ($input.val() === "" && isValid) {
+          if ($input.val() === "") {
             $formGroup.addClass("is-empty");
           }
           else {