Skip to content

Instantly share code, notes, and snippets.

@isidroamv
Last active April 27, 2017 15:33
Show Gist options
  • Save isidroamv/e787a0a27ab6d4343675 to your computer and use it in GitHub Desktop.
Save isidroamv/e787a0a27ab6d4343675 to your computer and use it in GitHub Desktop.
SASS input validation for materializecss & Angular2
// 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-local],
input[type=tel],
input[type=number],
input[type=search],
textarea.materialize-textarea {
// General Styles
background-color: transparent;
border: none;
border-bottom: 1px solid $input-border-color;
border-radius: 0;
outline: none;
height: 3rem;
width: 100%;
font-size: 1rem;
margin: 0 0 15px 0;
padding: 0;
box-shadow: none;
box-sizing: content-box;
transition: all .3s;
// Disabled input style
&:disabled, &[readonly="readonly"] {
color: $input-disabled-color;
border-bottom: 1px dotted $input-disabled-color;
}
// 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
&.ng-dirty.ng-valid,
.submited &.ng-valid,
&:focus.ng-dirty.ng-valid {
border-bottom: 1px solid $input-success-color;
box-shadow: 0 1px 0 0 $input-success-color;
}
// Custom Success Message
&.ng-dirty.ng-valid + label:after,
.submited &.ng-valid + label:after,
&:focus.ng-dirty.ng-valid + label:after {
content: attr(data-success);
color: $input-success-color;
opacity: 1;
}
// Invalid Input Style
&.ng-dirty.ng-invalid,
.submited &.ng-invalid,
&:focus.ng-dirty.ng-invalid {
border-bottom: 1px solid $input-error-color;
box-shadow: 0 1px 0 0 $input-error-color;
}
// Custom Error message
&.ng-dirty.ng-invalid + label:after,
.submited &.ng-invalid + label:after,
&:focus.ng-dirty.ng-invalid + label:after {
content: attr(data-error);
color: $input-error-color;
opacity: 1;
min-width: 210px;
}
// Form Message Shared Styles
& + label:after {
display: block;
content: "";
position: absolute;
top: 36px;
font-size: .8rem;
opacity: 0;
transition: .2s opacity ease-out, .2s color ease-out;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment