SASS input validation for materializecss & Angular2

_form_validation.scss

// 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;
  }
}