Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support to material outlined text fields. #6542

Open
wants to merge 9 commits into
base: new-inputs
Choose a base branch
from

Conversation

nickeatingsalsage
Copy link

#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
Copy link

ghost commented Feb 27, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.