materialize-sass 0.97.8 → 1.0.0.1

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

@@ -3,36 +3,24 @@
 
 /* Style Placeholders */
 
-::-webkit-input-placeholder {
-  color: $placeholder-text-color;
-}
-
-:-moz-placeholder { /* Firefox 18- */
-  color: $placeholder-text-color;
-}
-
-::-moz-placeholder {  /* Firefox 19+ */
-  color: $placeholder-text-color;
-}
-
-:-ms-input-placeholder {
+::placeholder {
   color: $placeholder-text-color;
 }
 
 /* Text inputs */
 
 input:not([type]),
-input[type=text],
-input[type=password],
-input[type=email],
-input[type=url],
-input[type=time],
-input[type=date],
-input[type=datetime],
-input[type=datetime-local],
-input[type=tel],
-input[type=number],
-input[type=search],
+input[type=text]:not(.browser-default),
+input[type=password]:not(.browser-default),
+input[type=email]:not(.browser-default),
+input[type=url]:not(.browser-default),
+input[type=time]:not(.browser-default),
+input[type=date]:not(.browser-default),
+input[type=datetime]:not(.browser-default),
+input[type=datetime-local]:not(.browser-default),
+input[type=tel]:not(.browser-default),
+input[type=number]:not(.browser-default),
+input[type=search]:not(.browser-default),
 textarea.materialize-textarea {
 
   // General Styles
@@ -48,7 +36,7 @@ textarea.materialize-textarea {
   padding: $input-padding;
   box-shadow: none;
   box-sizing: content-box;
-  transition: $input-transition;
+  transition: box-shadow .3s, border .3s;
 
   // Disabled input style
   &:disabled,
@@ -74,53 +62,89 @@ 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 {
-    border-bottom: 1px solid $input-success-color;
-    box-shadow: 0 1px 0 0 $input-success-color;
+    @extend %valid-input-style;
   }
 
   // Custom Success Message
-  &.valid + label:after,
-  &:focus.valid + label:after {
-    content: attr(data-success);
+  &.valid ~ .helper-text:after,
+  &:focus.valid ~ .helper-text:after {
+    @extend %custom-success-message;
+  }
+  &:focus.valid ~ label {
     color: $input-success-color;
-    opacity: 1;
   }
 
   // Invalid Input Style
   &.invalid,
   &:focus.invalid {
-    border-bottom: $input-invalid-border;
-    box-shadow: 0 1px 0 0 $input-error-color;
+    @extend %invalid-input-style;
   }
 
   // Custom Error message
-  &.invalid + label:after,
-  &:focus.invalid + label:after {
-    content: attr(data-error);
+  &.invalid ~ .helper-text:after,
+  &:focus.invalid ~ .helper-text:after {
+    @extend %custom-error-message;
+  }
+  &:focus.invalid ~ label {
     color: $input-error-color;
-    opacity: 1;
   }
 
   // Full width label when using validate for error messages
   &.validate + label {
     width: 100%;
-    pointer-events: none;
   }
 
   // Form Message Shared Styles
   & + label:after {
-    display: block;
-    content: "";
-    position: absolute;
-    top: 60px;
-    opacity: 0;
-    transition: .2s opacity ease-out, .2s color ease-out;
+    @extend %input-after-style;
   }
 }
 
+
+/* Validation Sass Placeholders */
+%valid-input-style {
+  border-bottom: 1px solid $input-success-color;
+  box-shadow: 0 1px 0 0 $input-success-color;
+}
+%invalid-input-style {
+  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;
+}
+%custom-error-message {
+  content: attr(data-error);
+  color: $input-error-color;
+}
+%input-after-style {
+  display: block;
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 0;
+  opacity: 0;
+  transition: .2s opacity ease-out, .2s color ease-out;
+}
+
+
 // Styling for input field wrapper
 .input-field {
   // Inline styles
@@ -149,28 +173,56 @@ textarea.materialize-textarea {
 
   position: relative;
   margin-top: 1rem;
+  margin-bottom: 1rem;
 
-  label {
+  & > label {
     color: $input-border-color;
     position: absolute;
-    top: 0.8rem;
+    top: 0;
     left: 0;
     font-size: 1rem;
     cursor: text;
-    transition: .2s ease-out;
+    transition: transform .2s ease-out, color .2s ease-out;
+    transform-origin: 0% 100%;
+    text-align: initial;
+    transform: translateY(12px);
+
+    &:not(.label-icon).active {
+      transform: translateY(-14px) scale(.8);
+      transform-origin: 0 0;
+    }
+  }
+
+  // Autofill + date + time inputs
+  & > input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + label,
+  & > input[type=date]:not(.browser-default) + label,
+  & > input[type=time]:not(.browser-default) + label {
+    transform: translateY(-14px) scale(.8);
+    transform-origin: 0 0;
   }
 
-  label.active {
-    font-size: $label-font-size;
-    transform: translateY(-140%);
+  .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;
     width: $input-height;
-    font-size: 2rem;
+    font-size: $input-icon-size;
     transition: color .2s;
+    top: ($input-height - $input-icon-size) / 2;
 
     &.active { color: $input-focus-color; }
   }
@@ -179,6 +231,7 @@ textarea.materialize-textarea {
   .prefix ~ textarea,
   .prefix ~ label,
   .prefix ~ .validate ~ label,
+  .prefix ~ .helper-text,
   .prefix ~ .autocomplete-content {
     margin-left: 3rem;
     width: 92%;
@@ -208,10 +261,17 @@ textarea.materialize-textarea {
 .input-field input[type=search] {
   display: block;
   line-height: inherit;
-  padding-left: 4rem;
-  width: calc(100% - 4rem);
+  transition: .3s background-color;
+
+  .nav-wrapper & {
+    height: inherit;
+    padding-left: 4rem;
+    width: calc(100% - 4rem);
+    border: 0;
+    box-shadow: none;
+  }
 
-  &:focus {
+  &:focus:not(.browser-default) {
     background-color: $input-background;
     border: 0;
     box-shadow: none;
@@ -224,7 +284,8 @@ textarea.materialize-textarea {
     }
   }
 
-  & + label {
+  & + .label-icon {
+    transform: none;
     left: 1rem;
   }
 
@@ -235,7 +296,7 @@ textarea.materialize-textarea {
     right: 1rem;
     color: transparent;
     cursor: pointer;
-    font-size: 2rem;
+    font-size: $input-icon-size;
     transition: .3s color;
   }
 }
@@ -250,30 +311,32 @@ textarea {
   background-color: transparent;
 
   &.materialize-textarea {
+    line-height: normal;
     overflow-y: hidden; /* prevents scroll bar flash */
-    padding: .8rem 0 1.6rem 0; /* prevents text jump on Enter keypress */
+    padding: .8rem 0 .8rem 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' */
   padding-top: 1.2rem; /* prevents text jump on Enter keypress */
+
+  // Reduces repaints
+  position: absolute;
+  top: 0;
+  z-index: -1;
 }
 
 
 /* Autocomplete */
 .autocomplete-content {
-  margin-top: -15px;
-  display: block;
-  opacity: 1;
-  position: static;
-
   li {
     .highlight { color: #444; }
 
@@ -284,3 +347,8 @@ textarea {
     }
   }
 }
+
+/* Character Counter */
+.character-counter {
+  min-height: 18px;
+}

data/assets/stylesheets/materialize/components/forms/_radio-buttons.scss

@@ -0,0 +1,115 @@
+/* Radio Buttons
+   ========================================================================== */
+
+// Remove default Radio Buttons
+[type="radio"]:not(:checked),
+[type="radio"]:checked {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+[type="radio"]:not(:checked) + span,
+[type="radio"]:checked + span {
+  position: relative;
+  padding-left: 35px;
+  cursor: pointer;
+  display: inline-block;
+  height: 25px;
+  line-height: 25px;
+  font-size: 1rem;
+  transition: .28s ease;
+  user-select: none;
+}
+
+[type="radio"] + span:before,
+[type="radio"] + span:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  margin: 4px;
+  width: 16px;
+  height: 16px;
+  z-index: 0;
+  transition: .28s ease;
+}
+
+/* Unchecked styles */
+[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) + span:before,
+[type="radio"]:not(:checked) + span:after {
+  border: 2px solid $radio-empty-color;
+}
+
+[type="radio"]:not(:checked) + span:after {
+  transform: scale(0);
+}
+
+/* Checked styles */
+[type="radio"]:checked + span:before {
+  border: 2px solid transparent;
+}
+
+[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 + span:after,
+[type="radio"].with-gap:checked + span:after {
+  background-color: $radio-fill-color;
+}
+
+[type="radio"]:checked + span:after {
+  transform: scale(1.02);
+}
+
+/* Radio With gap */
+[type="radio"].with-gap:checked + span:after {
+  transform: scale(.5);
+}
+
+/* Focused styles */
+[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 + span:before {
+  border: 2px solid $input-disabled-color;
+}
+
+[type="radio"].with-gap:disabled:checked + span:after {
+  border: none;
+  background-color: $input-disabled-color;
+}
+
+/* Disabled style */
+[type="radio"]:disabled:not(:checked) + span:before,
+[type="radio"]:disabled:checked + span:before {
+  background-color: transparent;
+  border-color: $input-disabled-color;
+}
+
+[type="radio"]:disabled + span {
+  color: $input-disabled-color;
+}
+
+[type="radio"]:disabled:not(:checked) + span:before {
+  border-color: $input-disabled-color;
+}
+
+[type="radio"]:disabled:checked + span:after {
+  background-color: $input-disabled-color;
+  border-color: $input-disabled-solid-color;
+}

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

@@ -27,13 +27,14 @@ input[type=range] {
 
 input[type=range] + .thumb {
   position: absolute;
+  top: 10px;
+  left: 0;
   border: none;
   height: 0;
   width: 0;
   border-radius: 50%;
   background-color: $radio-fill-color;
-  top: 10px;
-  margin-left: -6px;
+  margin-left: 7px;
 
   transform-origin: 50% 50%;
   transform: rotate(-45deg);
@@ -59,31 +60,42 @@ input[type=range] + .thumb {
   }
 }
 
+// Shared
+@mixin range-track {
+  height: $track-height;
+  background: #c2c0c2;
+  border: none;
+}
+
+@mixin range-thumb {
+  border: none;
+  height: $range-height;
+  width: $range-width;
+  border-radius: 50%;
+  background: $radio-fill-color;
+  transition: box-shadow .3s;
+}
+
 // WebKit
 input[type=range] {
   -webkit-appearance: none;
 }
 
 input[type=range]::-webkit-slider-runnable-track {
-  height: $track-height;
-  background: #c2c0c2;
-  border: none;
+  @include range-track;
 }
 
 input[type=range]::-webkit-slider-thumb {
+  @include range-thumb;
   -webkit-appearance: none;
-  border: none;
-  height: $range-height;
-  width: $range-width;
-  border-radius: 50%;
   background-color: $radio-fill-color;
   transform-origin: 50% 50%;
   margin: -5px 0 0 0;
-  transition: .3s;
+
 }
 
-input[type=range]:focus::-webkit-slider-runnable-track {
-  background: #ccc;
+.keyboard-focused input[type=range]:focus:not(.active)::-webkit-slider-thumb {
+  box-shadow: 0 0 0 10px rgba($radio-fill-color, .26);
 }
 
 // FireFox
@@ -95,17 +107,15 @@ input[type=range] {
 }
 
 input[type=range]::-moz-range-track {
-  height: $track-height;
-  background: #ddd;
-  border: none;
+  @include range-track;
+}
+
+input[type=range]::-moz-focus-inner {
+  border: 0;
 }
 
 input[type=range]::-moz-range-thumb {
-  border: none;
-  height: $range-height;
-  width: $range-width;
-  border-radius: 50%;
-  background: $radio-fill-color;
+  @include range-thumb;
   margin-top: -5px;
 }
 
@@ -115,8 +125,8 @@ input[type=range]:-moz-focusring {
   outline-offset: -1px;
 }
 
-input[type=range]:focus::-moz-range-track {
-  background: #ccc;
+.keyboard-focused input[type=range]:focus:not(.active)::-moz-range-thumb {
+  box-shadow: 0 0 0 10px rgba($radio-fill-color, .26);
 }
 
 // IE 10+
@@ -143,17 +153,9 @@ input[type=range]::-ms-fill-upper {
 }
 
 input[type=range]::-ms-thumb {
-  border: none;
-  height: $range-height;
-  width: $range-width;
-  border-radius: 50%;
-  background: $radio-fill-color;
-}
-
-input[type=range]:focus::-ms-fill-lower {
-  background: #888;
+  @include range-thumb;
 }
 
-input[type=range]:focus::-ms-fill-upper {
-  background: #ccc;
+.keyboard-focused input[type=range]:focus:not(.active)::-ms-thumb {
+  box-shadow: 0 0 0 10px rgba($radio-fill-color, .26);
 }