_form.scss in materialize-sass-0.97.5

- old
+ new

@@ -53,11 +53,10 @@
   border-bottom: 1px solid $input-border-color;
   border-radius: 0;
   outline: none;
   height: 3rem;
   width: 100%;
-
   font-size: 1rem;
   margin: 0 0 15px 0;
   padding: 0;
   box-shadow: none;
   box-sizing: content-box;
@@ -106,10 +105,15 @@
   &:focus.invalid + label:after {
     content: attr(data-error);
     color: $input-error-color;
     opacity: 1;
   }
+  // Full width label when using validate for error messages
+  &.validate + label {
+    width: 100%;
+    z-index: -1;
+  }
 
   // Form Message Shared Styles
   & + label:after {
     display: block;
     content: "";
@@ -239,11 +243,11 @@
 /* Remove default Radio Buttons */
 [type="radio"]:not(:checked),
 [type="radio"]:checked {
   position: absolute;
   left: -9999px;
-  visibility: hidden;
+  opacity: 0;
 }
 
 [type="radio"]:not(:checked) + label,
 [type="radio"]:checked + label {
   position: relative;
@@ -309,10 +313,15 @@
   background-color: $radio-fill-color;
   z-index: 0;
   transform: scale(.5);
 }
 
+/* Focused styles */
+[type="radio"].tabbed:focus + label:before {
+  box-shadow: 0px 0px 0px 10px rgba(0,0,0,.1);
+}
+
 /* Disabled Radio With gap */
 [type="radio"].with-gap:disabled:checked + label:before {
   border: 2px solid $input-disabled-color;
 }
 [type="radio"].with-gap:disabled:checked + label:after {
@@ -353,11 +362,11 @@
 /* Remove default checkbox */
 [type="checkbox"]:not(:checked),
 [type="checkbox"]:checked {
   position: absolute;
   left: -9999px;
-  visibility: hidden;
+  opacity: 0;
 }
 
 // Checkbox Styles
 [type="checkbox"] {
 
@@ -376,11 +385,12 @@
     -khtml-user-select: none; /* webkit (konqueror) browsers */
     -ms-user-select: none; /* IE10+ */
   }
 
   /* checkbox aspect */
-  + label:before {
+  + label:before,
+  &:not(.filled-in) + label:after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 18px;
@@ -389,21 +399,34 @@
     border: 2px solid $radio-empty-color;
     border-radius: 1px;
     margin-top: 2px;
     transition: .2s;
   }
+  &:not(.filled-in) + label:after {
+    border: 0;
+    transform: scale(0);
+  }
 
   &:not(:checked):disabled + label:before {
     border: none;
     background-color: $input-disabled-color;
   }
+
+  // Focused styles
+  &.tabbed:focus + label:after {
+    transform: scale(1);
+    border: 0;
+    border-radius: 50%;
+    box-shadow: 0px 0px 0px 10px rgba(0,0,0,.1);
+    background-color: rgba(0,0,0,.1);
+  }
 }
 
 [type="checkbox"]:checked {
   + label:before {
     top: -4px;
-    left: -3px;
+    left: -5px;
     width: 12px; height: 22px;
     border-top: 2px solid transparent;
     border-left: 2px solid transparent;
     border-right: 2px solid $radio-fill-color;
     border-bottom: 2px solid $radio-fill-color;
@@ -419,12 +442,12 @@
 }
 
 /* Indeterminate checkbox */
 [type="checkbox"]:indeterminate {
   +label:before {
-    left: -10px;
     top: -11px;
+    left: -12px;
     width: 10px; height: 22px;
     border-top: none;
     border-left: none;
     border-right: 2px solid $radio-fill-color;
     border-bottom: none;
@@ -504,9 +527,22 @@
       border: 2px solid $secondary-color;
       background-color: $secondary-color;
       z-index: 0;
     }
   }
+
+  // Focused styles
+  &.tabbed:focus + label:after {
+    border-radius: 2px;
+    border-color: $radio-empty-color;
+    background-color: rgba(0,0,0,.1);
+  }
+  &.tabbed:checked:focus + label:after {
+    border-radius: 2px;
+    background-color: $secondary-color;
+    border-color: $secondary-color;
+  }
+
   // Disabled style
   &:disabled:not(:checked) + label:before {
     background-color: transparent;
     border: 2px solid transparent;
   }