materialize-sass 0.100.2.1 → 1.0.0.alpha1

data/{app/assets → assets}/stylesheets/materialize/components/forms/_checkboxes.scss

@@ -22,7 +22,7 @@ form p:last-child {
 // Checkbox Styles
 [type="checkbox"] {
   // Text Label Style
-  + label {
+  + span:not(.lever) {
     position: relative;
     padding-left: 35px;
     cursor: pointer;
@@ -34,8 +34,8 @@ form p:last-child {
   }
 
   /* checkbox aspect */
-  + label:before,
-  &:not(.filled-in) + label:after {
+  + span:not(.lever):before,
+  &:not(.filled-in) + span:not(.lever):after {
     content: '';
     position: absolute;
     top: 0;
@@ -45,22 +45,22 @@ form p:last-child {
     z-index: 0;
     border: 2px solid $radio-empty-color;
     border-radius: 1px;
-    margin-top: 2px;
+    margin-top: 3px;
     transition: .2s;
   }
 
-  &:not(.filled-in) + label:after {
+  &:not(.filled-in) + span:not(.lever):after {
     border: 0;
     transform: scale(0);
   }
 
-  &:not(:checked):disabled + label:before {
+  &:not(:checked):disabled + span:not(.lever):before {
     border: none;
     background-color: $input-disabled-color;
   }
 
   // Focused styles
-  &.tabbed:focus + label:after {
+  &.tabbed:focus + span:not(.lever):after {
     transform: scale(1);
     border: 0;
     border-radius: 50%;
@@ -70,7 +70,7 @@ form p:last-child {
 }
 
 [type="checkbox"]:checked {
-  + label:before {
+  + span:not(.lever):before {
     top: -4px;
     left: -5px;
     width: 12px;
@@ -84,7 +84,7 @@ form p:last-child {
     transform-origin: 100% 100%;
   }
 
-  &:disabled + label:before {
+  &:disabled + span:before {
     border-right: 2px solid $input-disabled-color;
     border-bottom: 2px solid $input-disabled-color;
   }
@@ -92,7 +92,7 @@ form p:last-child {
 
 /* Indeterminate checkbox */
 [type="checkbox"]:indeterminate {
-  +label:before {
+  + span:not(.lever):before {
     top: -11px;
     left: -12px;
     width: 10px;
@@ -107,7 +107,7 @@ form p:last-child {
   }
 
   // Disabled indeterminate
-  &:disabled + label:before {
+  &:disabled + span:not(.lever):before {
     border-right: 2px solid $input-disabled-color;
     background-color: transparent;
   }
@@ -116,12 +116,12 @@ form p:last-child {
 // Filled in Style
 [type="checkbox"].filled-in {
   // General
-  + label:after {
+  + span:not(.lever):after {
     border-radius: 2px;
   }
 
-  + label:before,
-  + label:after {
+  + span:not(.lever):before,
+  + span:not(.lever):after {
     content: '';
     left: 0;
     position: absolute;
@@ -131,7 +131,7 @@ form p:last-child {
   }
 
   // Unchecked style
-  &:not(:checked) + label:before {
+  &:not(:checked) + span:not(.lever):before {
     width: 0;
     height: 0;
     border: 3px solid transparent;
@@ -141,7 +141,7 @@ form p:last-child {
     transform-origin: 100% 100%;
   }
 
-  &:not(:checked) + label:after {
+  &:not(:checked) + span:not(.lever):after {
     height: 20px;
     width: 20px;
     background-color: transparent;
@@ -152,7 +152,7 @@ form p:last-child {
 
   // Checked style
   &:checked {
-    + label:before {
+    + span:not(.lever):before {
       top: 0;
       left: 1px;
       width: 8px;
@@ -165,7 +165,7 @@ form p:last-child {
       transform-origin: 100% 100%;
     }
 
-    + label:after {
+    + span:not(.lever):after {
       top: 0;
       width: 20px;
       height: 20px;
@@ -176,34 +176,34 @@ form p:last-child {
   }
 
   // Focused styles
-  &.tabbed:focus + label:after {
+  &.tabbed:focus + span:not(.lever):after {
     border-radius: 2px;
     border-color: $radio-empty-color;
     background-color: rgba(0,0,0,.1);
   }
 
-  &.tabbed:checked:focus + label:after {
+  &.tabbed:checked:focus + span:not(.lever):after {
     border-radius: 2px;
     background-color: $secondary-color;
     border-color: $secondary-color;
   }
 
   // Disabled style
-  &:disabled:not(:checked) + label:before {
+  &:disabled:not(:checked) + span:not(.lever):before {
     background-color: transparent;
     border: 2px solid transparent;
   }
 
-  &:disabled:not(:checked) + label:after {
+  &:disabled:not(:checked) + span:not(.lever):after {
     border-color: transparent;
     background-color: $input-disabled-solid-color;
   }
 
-  &:disabled:checked + label:before {
+  &:disabled:checked + span:not(.lever):before {
     background-color: transparent;
   }
 
-  &:disabled:checked + label:after {
+  &:disabled:checked + span:not(.lever):after {
     background-color: $input-disabled-solid-color;
     border-color: $input-disabled-solid-color;
   }

data/{app/assets → assets}/stylesheets/materialize/components/forms/_input-fields.scss

@@ -62,6 +62,14 @@ textarea.materialize-textarea {
     color: $input-focus-color;
   }
 
+  // Hide helper text on data message
+  &.valid ~ .helper-text[data-success],
+  &:focus.valid ~ .helper-text[data-success],
+  &.invalid ~ .helper-text[data-error],
+  &:focus.invalid ~ .helper-text[data-error] {
+    @extend %hidden-text;
+  }
+
   // Valid Input Style
   &.valid,
   &:focus.valid {
@@ -69,10 +77,13 @@ textarea.materialize-textarea {
   }
 
   // Custom Success Message
-  &.valid + label:after,
-  &:focus.valid + label:after {
+  &.valid ~ .helper-text:after,
+  &:focus.valid ~ .helper-text:after {
     @extend %custom-success-message;
   }
+  &:focus.valid ~ label {
+    color: $input-success-color;
+  }
 
   // Invalid Input Style
   &.invalid,
@@ -81,10 +92,13 @@ textarea.materialize-textarea {
   }
 
   // Custom Error message
-  &.invalid + label:after,
-  &:focus.invalid + label:after {
+  &.invalid ~ .helper-text:after,
+  &:focus.invalid ~ .helper-text:after {
     @extend %custom-error-message;
   }
+  &:focus.invalid ~ label {
+    color: $input-error-color;
+  }
 
   // Full width label when using validate for error messages
   &.validate + label {
@@ -95,17 +109,6 @@ textarea.materialize-textarea {
   & + label:after {
     @extend %input-after-style;
   }
-
-  // TODO: Remove once input fields are reworked to support validation messages better
-  &.invalid + label:after,
-  &.valid + label:after{
-    display: none;
-  }
-
-  &.invalid + label.active:after,
-  &.valid + label.active:after{
-    display: block;
-  }
 }
 
 
@@ -118,17 +121,18 @@ textarea.materialize-textarea {
   border-bottom: $input-invalid-border;
   box-shadow: 0 1px 0 0 $input-error-color;
 }
+%hidden-text {
+  color: transparent;
+  user-select: none;
+  pointer-events: none;
+}
 %custom-success-message {
   content: attr(data-success);
   color: $input-success-color;
-  opacity: 1;
-  transform: translateY(9px);
 }
 %custom-error-message {
   content: attr(data-error);
   color: $input-error-color;
-  opacity: 1;
-  transform: translateY(9px);
 }
 %input-after-style {
   display: block;
@@ -169,20 +173,19 @@ textarea.materialize-textarea {
 
   position: relative;
   margin-top: 1rem;
+  margin-bottom: 1rem;
 
-  label {
+  & > label {
     color: $input-border-color;
     position: absolute;
     top: 0;
     left: 0;
-    height: 100%;
     font-size: 1rem;
     cursor: text;
-    transition: transform .2s ease-out;
+    transition: transform .2s ease-out, color .2s ease-out;
     transform-origin: 0% 100%;
     text-align: initial;
     transform: translateY(12px);
-    pointer-events: none;
 
     &:not(.label-icon).active {
       transform: translateY(-14px) scale(.8);
@@ -190,6 +193,21 @@ textarea.materialize-textarea {
     }
   }
 
+  .helper-text {
+    &::after {
+      opacity: 1;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    position: relative;
+    min-height: 18px;
+    display: block;
+    font-size: 12px;
+    color: rgba(0,0,0,.54);
+  }
+
   // Prefix Icons
   .prefix {
     position: absolute;
@@ -281,27 +299,17 @@ textarea {
   background-color: transparent;
 
   &.materialize-textarea {
-    // Fixes validation messages for dynamic textareas
-    &.validate + label {
-      &::after {
-        top: calc(100% - 12px);
-      }
-      &:not(.label-icon).active {
-        transform: translateY(-25px);
-      }
-      height: 100%;
-    }
-
     overflow-y: hidden; /* prevents scroll bar flash */
     padding: .8rem 0 1.6rem 0; /* prevents text jump on Enter keypress */
     resize: none;
     min-height: $input-height;
+    box-sizing: border-box;
   }
 }
 
 // For textarea autoresize
 .hiddendiv {
-  display: none;
+  visibility: hidden;
   white-space: pre-wrap;
   word-wrap: break-word;
   overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
@@ -310,6 +318,7 @@ textarea {
   // Reduces repaints
   position: absolute;
   top: 0;
+  z-index: -1;
 }
 
 
@@ -331,3 +340,8 @@ textarea {
     }
   }
 }
+
+/* Character Counter */
+.character-counter {
+  min-height: 18px;
+}

data/{app/assets → assets}/stylesheets/materialize/components/forms/_radio-buttons.scss

@@ -9,8 +9,8 @@
   pointer-events: none;
 }
 
-[type="radio"]:not(:checked) + label,
-[type="radio"]:checked + label {
+[type="radio"]:not(:checked) + span,
+[type="radio"]:checked + span {
   position: relative;
   padding-left: 35px;
   cursor: pointer;
@@ -22,8 +22,8 @@
   user-select: none;
 }
 
-[type="radio"] + label:before,
-[type="radio"] + label:after {
+[type="radio"] + span:before,
+[type="radio"] + span:after {
   content: '';
   position: absolute;
   left: 0;
@@ -36,80 +36,80 @@
 }
 
 /* Unchecked styles */
-[type="radio"]:not(:checked) + label:before,
-[type="radio"]:not(:checked) + label:after,
-[type="radio"]:checked + label:before,
-[type="radio"]:checked + label:after,
-[type="radio"].with-gap:checked + label:before,
-[type="radio"].with-gap:checked + label:after {
+[type="radio"]:not(:checked) + span:before,
+[type="radio"]:not(:checked) + span:after,
+[type="radio"]:checked + span:before,
+[type="radio"]:checked + span:after,
+[type="radio"].with-gap:checked + span:before,
+[type="radio"].with-gap:checked + span:after {
   border-radius: 50%;
 }
 
-[type="radio"]:not(:checked) + label:before,
-[type="radio"]:not(:checked) + label:after {
+[type="radio"]:not(:checked) + span:before,
+[type="radio"]:not(:checked) + span:after {
   border: 2px solid $radio-empty-color;
 }
 
-[type="radio"]:not(:checked) + label:after {
+[type="radio"]:not(:checked) + span:after {
   transform: scale(0);
 }
 
 /* Checked styles */
-[type="radio"]:checked + label:before {
+[type="radio"]:checked + span:before {
   border: 2px solid transparent;
 }
 
-[type="radio"]:checked + label:after,
-[type="radio"].with-gap:checked + label:before,
-[type="radio"].with-gap:checked + label:after {
+[type="radio"]:checked + span:after,
+[type="radio"].with-gap:checked + span:before,
+[type="radio"].with-gap:checked + span:after {
   border: $radio-border;
 }
 
-[type="radio"]:checked + label:after,
-[type="radio"].with-gap:checked + label:after {
+[type="radio"]:checked + span:after,
+[type="radio"].with-gap:checked + span:after {
   background-color: $radio-fill-color;
 }
 
-[type="radio"]:checked + label:after {
+[type="radio"]:checked + span:after {
   transform: scale(1.02);
 }
 
 /* Radio With gap */
-[type="radio"].with-gap:checked + label:after {
+[type="radio"].with-gap:checked + span:after {
   transform: scale(.5);
 }
 
 /* Focused styles */
-[type="radio"].tabbed:focus + label:before {
+[type="radio"].tabbed:focus + span:before {
   box-shadow: 0 0 0 10px rgba(0,0,0,.1);
 }
 
 /* Disabled Radio With gap */
-[type="radio"].with-gap:disabled:checked + label:before {
+[type="radio"].with-gap:disabled:checked + span:before {
   border: 2px solid $input-disabled-color;
 }
 
-[type="radio"].with-gap:disabled:checked + label:after {
+[type="radio"].with-gap:disabled:checked + span:after {
   border: none;
   background-color: $input-disabled-color;
 }
 
 /* Disabled style */
-[type="radio"]:disabled:not(:checked) + label:before,
-[type="radio"]:disabled:checked + label:before {
+[type="radio"]:disabled:not(:checked) + span:before,
+[type="radio"]:disabled:checked + span:before {
   background-color: transparent;
   border-color: $input-disabled-color;
 }
 
-[type="radio"]:disabled + label {
+[type="radio"]:disabled + span {
   color: $input-disabled-color;
 }
 
-[type="radio"]:disabled:not(:checked) + label:before {
+[type="radio"]:disabled:not(:checked) + span:before {
   border-color: $input-disabled-color;
 }
 
-[type="radio"]:disabled:checked + label:after {
+[type="radio"]:disabled:checked + span:after {
   background-color: $input-disabled-color;
   border-color: $input-disabled-solid-color;
 }