/* Text Inputs + Textarea
========================================================================== */
/* Style Placeholders */
::placeholder {
color: $placeholder-text-color;
}
/* Text inputs */
input:not(), input:not(.browser-default), input:not(.browser-default), input:not(.browser-default), input:not(.browser-default), input:not(.browser-default), input:not(.browser-default), input:not(.browser-default), input:not(.browser-default), input:not(.browser-default), input:not(.browser-default), input:not(.browser-default), textarea.materialize-textarea {
// General Styles background-color: transparent; border: none; border-bottom: $input-border; border-radius: 0; outline: none; height: $input-height; width: 100%; font-size: $input-font-size; margin: $input-margin; padding: $input-padding; box-shadow: none; box-sizing: content-box; transition: $input-transition; // 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; } // Valid Input Style &.valid, &:focus.valid { @extend %valid-input-style; } // Custom Success Message &.valid + label:after, &:focus.valid + label:after { @extend %custom-success-message; } // Invalid Input Style &.invalid, &:focus.invalid { @extend %invalid-input-style; } // Custom Error message &.invalid + label:after, &:focus.invalid + label:after { @extend %custom-error-message; } // Full width label when using validate for error messages &.validate + label { width: 100%; } // Form Message Shared Styles & + 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; }
}
/* 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;
} %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; 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; } .prefix ~ label, .prefix ~ .validate ~ label { width: calc(100% - 3rem - #{$gutter-width}); } } position: relative; margin-top: 1rem; label { color: $input-border-color; position: absolute; top: 0; left: 0; height: 100%; font-size: 1rem; cursor: text; transition: transform .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); transform-origin: 0 0; } } // Prefix Icons .prefix { position: absolute; width: $input-height; font-size: 2rem; transition: color .2s; &.active { color: $input-focus-color; } } .prefix ~ input, .prefix ~ textarea, .prefix ~ label, .prefix ~ .validate ~ label, .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 {
display: block; line-height: inherit; .nav-wrapper & { height: inherit; padding-left: 4rem; width: calc(100% - 4rem); border: 0; box-shadow: none; } &:focus { background-color: $input-background; border: 0; box-shadow: none; color: #444; & + label i, & ~ .mdi-navigation-close, & ~ .material-icons { color: #444; } } & + label { left: 1rem; } & ~ .mdi-navigation-close, & ~ .material-icons { position: absolute; top: 0; right: 1rem; color: transparent; cursor: pointer; font-size: 2rem; transition: .3s color; }
}
/* Textarea */
// Default textarea textarea {
width: 100%; height: $input-height; 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; }
}
// For textarea autoresize .hiddendiv {
display: none; 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;
}
/* Autocomplete */ .autocomplete-content {
margin-top: -1 * $input-margin-bottom; margin-bottom: $input-margin-bottom; display: block; opacity: 1; position: static; li { .highlight { color: #444; } img { height: $dropdown-item-height - 10; width: $dropdown-item-height - 10; margin: 5px 15px; } }
}