Support to material outlined text fields.

[nickeatingsalsage]

#6273

Added support to material outlined fiels, just few changes in _input-fields.scss:
Please take a look:
`/* Text Inputs + Textarea
========================================================================== */

/* Style Placeholders */

::placeholder {
color: $placeholder-text-color;
}

/* Text inputs */
input:not([type]),
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
padding: 0 0 0 10px !important;
background-color: #eeeeee;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: none;
border-bottom: $input-border;
outline: none;
height: $input-height;
width: 100%;
font-size: $input-font-size;
margin: $input-margin;
box-shadow: none;
box-sizing: content-box;
transition: box-shadow .3s, border .3s;

// Disabled input style
&:disabled,
&[readonly="readonly"] {
color: $input-disabled-color;
border-bottom: $input-disabled-border;
}

// Disabled label style
&:disabled + label,
&[readonly="readonly"] + label {
color: $input-disabled-color;
}

// Focused input style
&:focus:not([readonly]) {
border-bottom: 1px solid $input-focus-color;
box-shadow: 0 1px 0 0 $input-focus-color;
}

// Focused label style
&:focus:not([readonly]) + label {
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 {
@extend %valid-input-style;
}

// Custom Success Message
&.valid ~ .helper-text:after,
&:focus.valid ~ .helper-text:after {
@extend %custom-success-message;
}

&:focus.valid ~ label {
color: $input-border-color !important;
}

// Invalid Input Style
&.invalid,
&:focus.invalid {
@extend %invalid-input-style;
}

// Custom Error message
&.invalid ~ .helper-text:after,
&:focus.invalid ~ .helper-text:after {
@extend %custom-error-message;
}

&:focus.invalid ~ label {
color: $input-error-color !important;
}

// Full width label when using validate for error messages
&.validate + label {
width: 100%;
}

// Form Message Shared Styles
& + label:after {
@extend %input-after-style;
}
}

/* Validation Sass Placeholders */
%valid-input-style {
//border: 1px solid $input-border-color !important;
//box-shadow: inset 0 0 0 1.5px $input-border-color !important;
}

%invalid-input-style {
border: 1px solid $input-error-color !important;
box-shadow: inset 0 0 0 1.5px $input-error-color !important;
}

%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
&.inline {
display: inline-block;
vertical-align: middle;
margin-left: 5px;

input,
.select-dropdown {
  margin-bottom: 1rem;
}

}

// Gutter spacing
&.col {
label {
left: $gutter-width / 2;
font-weight: 400;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}

.prefix ~ label,
.prefix ~ .validate ~ label {
  width: calc(100% - 3rem - #{$gutter-width});
}

}

position: relative;
margin-top: 1rem;
margin-bottom: 1rem;

& > label {
color: $input-border-color;
font-weight: 400;
position: absolute;
top: 0;
left: 0;
font-size: 1rem;
padding-left: 4px;
cursor: text;
transition: transform .2s ease-out, color .2s ease-out;
transform-origin: 0% 100%;
text-align: initial;
transform: translateX(4px) translateY(12px);

&:not(.label-icon).active {
  transform: translateX(6px) translateY(-1.8px) scale(.8);
  transform-origin: 0 0;
}

}

// Autofill + date + time inputs
& > input[type]:-webkit-autofill:not(.browser-default) + label,
& > input[type=date]:not(.browser-default) + label,
& > input[type=time]:not(.browser-default) + label {
transform: translateY(-14px) scale(.8);
transform-origin: 0 0;
}

.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: $input-icon-size;
transition: color .2s;
top: ($input-height - $input-icon-size) / 2;

&.active {
  color: $input-focus-color;
}

}

.prefix ~ input,
.prefix ~ textarea,
.prefix ~ label,
.prefix ~ .validate ~ label,
.prefix ~ .helper-text,
.prefix ~ .autocomplete-content {
margin-left: 3rem;
width: 92%;
width: calc(100% - 3rem);
}

.prefix ~ label {
margin-left: 3rem;
}

@media #{$medium-and-down} {
.prefix ~ input {
width: 86%;
width: calc(100% - 3rem);
}
}

@media #{$small-and-down} {
.prefix ~ input {
width: 80%;
width: calc(100% - 3rem);
}
}
}

/* Search Field */

.input-field input[type=search] {
display: block;
line-height: inherit;
transition: .3s background-color;

.nav-wrapper & {
height: inherit;
padding-left: 4rem;
width: calc(100% - 4rem);
border: 0;
box-shadow: none;
}

&:focus:not(.browser-default) {
//background-color: $input-background;
border: 0;
box-shadow: none;
color: #444;

& + label i,
& ~ .mdi-navigation-close,
& ~ .material-icons {
  color: #444;
}

}

& + .label-icon {
transform: none;
left: 1rem;
}

& ~ .mdi-navigation-close,
& ~ .material-icons {
position: absolute;
top: 0;
right: 1rem;
color: transparent;
cursor: pointer;
font-size: $input-icon-size;
transition: .3s color;
}
}

/* Textarea */

// Default textarea
textarea {
width: 100%;
height: $input-height;
background-color: transparent;

&.materialize-textarea {
line-height: normal;
overflow-y: hidden; /* prevents scroll bar flash /
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 {
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 {
li {
.highlight {
color: #444;
}

img {
  height: $dropdown-item-height - 10;
  width: $dropdown-item-height - 10;
  margin: 5px 15px;
}

}
}

/* Character Counter */
.character-counter {
min-height: 18px;
}

.input-field-outlined {
@extend .input-field;

input {
@extend input, [type=text];
background-color: transparent !important;
border: 1px rgb(0, 0, 0, 0.12) solid !important;
border-radius: 4px;
box-sizing: border-box !important;

// Focused input style
&:focus:not([readonly]):not(.valid):not(.invalid) {
  border-color: $input-focus-color !important;
  box-shadow: inset 0 0 0 1.5px $input-focus-color !important;
}

}

&.col {
label {
left: $gutter-width / 2;
}
}

& > label {
color: $input-border-color;
font-weight: 500;
position: absolute;
top: 0;
left: 0;
padding-left: 4px;
padding-right: 4px;
font-size: 1rem;
cursor: text;
transition: transform .2s ease-out, color .2s ease-out;
transform-origin: 0% 100%;
text-align: initial;
transform: translateY(12px);

&:not(.label-icon).active {
  font-weight: 400;
  transform: translateX(8px) translateY(-8px) scale(.8);
  font-size: 0.9rem !important;
  background-color: white;
  transform-origin: 0 2px;
}

}
}

`

[ghost]

Hi. Is this still being worked on? It's something that I'd like to have as it's a great design trend lately.