Cacher is the code snippet organizer for pro developers

<input type="text" placeholder="Normal input" class="input">
<input type="text" placeholder="Shift right" class="input pl-shift-right">
<input type="text" placeholder="Shift left" class="input pl-shift-left">
<input type="text" placeholder="Slide down" class="input pl-slide-down">
<input type="text" placeholder="Fade out" class="input pl-fade-out">

.input {
  padding: .5rem 1rem;
}

.pl-shift-right::-webkit-input-placeholder {
  text-indent: 0;
  transition: text-indent 200ms;
}

.pl-shift-right:-moz-placeholder {
  text-indent: 0;
  transition: text-indent 200ms;
}

.pl-shift-right::-moz-placeholder {
  text-indent: 0;
  transition: text-indent 200ms;
}

.pl-shift-right:-ms-input-placeholder {
  text-indent: 0;
  transition: text-indent 200ms;
}

.pl-shift-right:focus::-webkit-input-placeholder {
  text-indent: 500px;
}

.pl-shift-right:focus:-moz-placeholder {
  text-indent: 500px;
}

.pl-shift-right:focus::-moz-placeholder {
  text-indent: 500px;
}

.pl-shift-right:focus:-ms-input-placeholder {
  text-indent: 500px;
}

.pl-shift-left::-webkit-input-placeholder {
  text-indent: 0;
  transition: text-indent 200ms;
}

.pl-shift-left:-moz-placeholder {
  text-indent: 0;
  transition: text-indent 200ms;
}

.pl-shift-left::-moz-placeholder {
  text-indent: 0;
  transition: text-indent 200ms;
}

.pl-shift-left:-ms-input-placeholder {
  text-indent: 0;
  transition: text-indent 200ms;
}

.pl-shift-left:focus::-webkit-input-placeholder {
  text-indent: -500px;
}

.pl-shift-left:focus:-moz-placeholder {
  text-indent: -500px;
}

.pl-shift-left:focus::-moz-placeholder {
  text-indent: -500px;
}

.pl-shift-left:focus:-ms-input-placeholder {
  text-indent: -500px;
}

.pl-slide-down::-webkit-input-placeholder {
  line-height: 1;
  transition: line-height 200ms;
}

.pl-slide-down:-moz-placeholder {
  line-height: 1;
  transition: line-height 200ms;
}

.pl-slide-down::-moz-placeholder {
  line-height: 1;
  transition: line-height 200ms;
}

.pl-slide-down:-ms-input-placeholder {
  line-height: 1;
  transition: line-height 200ms;
}

.pl-slide-down:focus::-webkit-input-placeholder {
  line-height: 5;
}

.pl-slide-down:focus:-moz-placeholder {
  line-height: 5;
}

.pl-slide-down:focus::-moz-placeholder {
  line-height: 5;
}

.pl-slide-down:focus:-ms-input-placeholder {
  line-height: 5;
}

.pl-fade-out::-webkit-input-placeholder {
  opacity: 1;
  transition: opacity 200ms;
}

.pl-fade-out:-moz-placeholder {
  opacity: 1;
  transition: opacity 200ms;
}

.pl-fade-out::-moz-placeholder {
  opacity: 1;
  transition: opacity 200ms;
}

.pl-fade-out:-ms-input-placeholder {
  opacity: 1;
  transition: opacity 200ms;
}

.pl-fade-out:focus::-webkit-input-placeholder {
  opacity: 0;
}

.pl-fade-out:focus:-moz-placeholder {
  opacity: 0;
}

.pl-fade-out:focus::-moz-placeholder {
  opacity: 0;
}

.pl-fade-out:focus:-ms-input-placeholder {
  opacity: 0;
}

// ----
// libsass (v3.3.2)
// ----

@mixin placeholder {
  &::-webkit-input-placeholder {@content}
  &:-moz-placeholder           {@content}
  &::-moz-placeholder          {@content}
  &:-ms-input-placeholder      {@content}  
}

@mixin pl-shift($side: left, $position: 500px, $duration: 200ms) {
  @include placeholder {
    text-indent: 0;
    transition: text-indent $duration;
  }
  &:focus {
    @include placeholder {
      text-indent: if($side == left, -$position, $position);
    }
  }
}

@mixin pl-slide-down($position: 5, $duration: 200ms) {
   @include placeholder {
    line-height: 1;
    transition: line-height $duration;
  }
  &:focus {
    @include placeholder {
      line-height: $position;
    }
  } 
}

@mixin pl-fade-out($duration: 200ms) {
  @include placeholder {
    opacity: 1;
    transition: opacity $duration;
  }
  &:focus {
    @include placeholder {
      opacity: 0;
    }
  } 
}

.input {
  padding: .5rem 1rem;
}
.pl-shift-right {
 @include pl-shift( right ); 
}

.pl-shift-left {
 @include pl-shift( left ); 
}

.pl-slide-down {
 @include pl-slide-down; 
}

.pl-fade-out {
 @include pl-fade-out; 
}

<input type="text" placeholder="Normal input" class="input">
<input type="text" placeholder="Shift right" class="input pl-shift-right">
<input type="text" placeholder="Shift left" class="input pl-shift-left">
<input type="text" placeholder="Slide down" class="input pl-slide-down">
<input type="text" placeholder="Fade out" class="input pl-fade-out">