_forms.scss

@charset "UTF-8";

@mixin input-text($color:#ccc) {
  &::-webkit-input-placeholder {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }

  width: 100%;
  display: block;
  border: none;
  padding: 10px 0;
  border-bottom: solid 1px $color;
  background-color: transparent;
  -webkit-transition: all 0.3s cubic-bezier(.64,.09,.08,1);
  transition: all 0.3s cubic-bezier(.64,.09,.08,1);

  &:focus {
    box-shadow: none;
    outline: none;
    border-bottom-width: 2px;
    &::-webkit-input-placeholder {
      color: $color;
      font-size: 11px;
      -webkit-transform: translateY(-20px);
              transform: translateY(-20px);
      visibility: visible !important;
    }
  }
}