adaptive placeholders

by John Doe

HTML

<div class="container">
  <form action="#">
    <input type="text" required>
    <label for="" placeholder="Your Full Name" alt="Full Name"></label>
    <input type="Email" required>
    <label for="" placeholder="Your Email Address" alt="Email"></label>
    <textarea required></textarea>
    <label for="" placeholder="Your Message" alt="Message"></label>
  </form>
</div>

SCSS

// Adaptive Placeholders. 
// This is a Codepen example for a git repo found on https://github.com/zellwk/adaptivePlaceholders

// Ignore everything until you see a large space. 
// RESETS AND MIXINS (All these are already done for you in _adaptive-placeholders.scss)
 input,
 textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 2 */
  margin: 0;
  /* 3 */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

label {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

 textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */
}

$ap-default: (
  height: 3em,
  margin: 1em,
  border: 1px,
  border-radius: 1.5em,
  font-size: 1em,
  border-color: #cccccc,
  label-color: #999999,
  active-color: #e87e22,
  valid-color: #23a045,
  placeholder-background-color: white,
  textarea: false
  );

$adaptive-placeholder: ();


// adaptive-placeholder
// --------------------
// - Creates adaptive placeholder

@mixin adaptive-placeholder($map: $adaptive-placeholder) {
  // Only overwrite ap defaults if $map is $adaptive-placeholder
  @if $map == $adaptive-placeholder {
    $ap-default: map-merge($ap-default, $map) !global;
    $map: $ap-default;
  }
  // Updates default map with new values
  $map: map-merge($ap-default, $map);
  // Gets variables
  $height: map-get($map, height);
  $margin: map-get($map, margin);
  $border: map-get($map, border);
  $radius: map-get($map, border-radius);
  $font-size: map-get($map, font-size);
  $border-color: map-get($map, border-color);
  $label-color: map-get($map, label-color);
  $active-color: map-get($map, active-color);
  $valid-color: map-get($map, valid-color);
  $placeholder-background: map-get($map, placeholder-background-color);
  $isTextarea: map-get($map, textarea);
  $borders: $border * 2;


  // Warnings for best practices
  @if $height < 2 * $margin {
    @warn "height needs to be at least 2x margin";
  }

  @if $height <...