sgregson/SassMeister-input-HTML.html

## SassMeister-input-HTML.html
 <body>
    <div id="form">
      <form id="register_form" action="null">
        <fieldset id="personal-details">
          <legend>Personal Details</legend>
          <div class="input-container" id="first-name">
            <input type="text" name="first-name" placeholder="First name"/>
            <label for="first-name">First name</label>
          </div>
          <div class="input-container" id="last-name">
            <input type="text" name="last-name" placeholder="Last name"/>
            <label for="last-name">Last name</label>
          </div>
          <div class="input-container" id="address">
            <input type="text" name="address" placeholder="Address"/>
            <label for="address">Address</label>
          </div>
          <div class="input-container" id="postal">
            <input type="text" name="postal" placeholder="Postal Code" maxlength="6" />
            <label for="postal">Postal Code</label>
          </div>
          <div class="input-container" id="city">
            <input type="text" name="city" placeholder="City"/>
            <label for="city">City</label>
          </div>
          <div class="input-container" id="city">
            <input type="text" name="city" placeholder="Generic Placeholder"/>
            <label for="city">Generic Label</label>
          </div>
        </fieldset>
      </form>
    </div>
  </body>

## SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----

$labelTextColor: #0075d5;
$hintTextColor: #ACACAC;
$formTextColor: #333333;

$pseudoIndent: 1px; //indent necessary for blinking cursor, placeholder text can't hover over

$secondInputPadding: 1px .4em 1px .4em; // only for appending fields
$defaultPadding: 1px;
$borderSize: 1px;
$fontSizeForm: 1em;
$fontSizeLabel: .65em;

$letterSpacing: 0.012em;
$inputTop: 1.2em;

$animations: labelIn, labelOut;
$animationTime: .35s;
$ease: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */

$fontStack: "Helvetica Neue", Helvetica, Arial;

@mixin placeholders() {
  &::-webkit-input-placeholder { @content; }
  &:-moz-placeholder { @content; }
  &::-moz-placeholder { @content; }
  &:-ms-input-placeholder { @content; }
}

form {
  padding-top: 2em;
  min-width: 440px;
  max-width: 700px;
  width: 80%;
  margin: auto;

  opacity: 0;
  animation: fadeIn .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) $animationTime/2 1 normal forwards;
  @keyframes fadeIn {
    from {opacity: 0;} to { opacity: 1;}
  }

  fieldset {
    display: block;
    border: 0;// override browser default
    .input-container:last-child {
      border-bottom-width: 0px;
    }
  }
  legend {
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: center;
    color: #71767C;
    border-bottom: 1px solid #71767C;
    width: 100%;
    height: 2em;
    line-height: 2em;
  }
  .input-container {
    position: relative;
    height: 2.9em;
    border: 0px solid #ECECEC;
    border-bottom-width: $borderSize;
  }
  //-----------------------------
  $letterSpacing: 0.012em;
  $inputTop: 1.2em;
  input {
    display: block;
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    border: 0;
    top: $inputTop;
    background: none;
    z-index: 1;
    padding: $defaultPadding ;
    font-size: $fontSizeForm;
    font-family: $fontStack;
    letter-spacing: $letterSpacing;
  }
  input {
    @include placeholders {
      position: relative;
      top: -1em;
      opacity: 1;
      left: $pseudoIndent;
      padding: 1.2em 0;  //sets the vertical placement of the "empty" state
      overflow: visible;
      color: rgba(#ACACAC, 1);
      background: rgba(255,255,255,1);
      transition: all 0.25s $ease;
    }
  }
  label {
    font-family: $fontStack;
    position: absolute;
    left: $pseudoIndent + 1;
    margin-top: 2px;
    padding: $defaultPadding;
    letter-spacing: $letterSpacing;
    color: $hintTextColor;
    font-size: $fontSizeForm * .65;
    color: $labelTextColor;
  }
  input:focus {
    + label {
      animation: labelIn .25s $ease forwards;
    }
    @include placeholders() {
      left: $pseudoIndent + 10;
      color: rgba(255,255,255,0);
      background: rgba(255,255,255,0);
    }
  }
  *:focus {
    outline: 0;
  }
}
@keyframes labelIn {
  from {
    left: $pseudoIndent + 20;
  }
  to {
    left: $pseudoIndent + 1;
  }
}
	<body>
	<div id="form">
	<form id="register_form" action="null">
	<fieldset id="personal-details">
	<legend>Personal Details</legend>
	<div class="input-container" id="first-name">
	<input type="text" name="first-name" placeholder="First name"/>
	<label for="first-name">First name</label>
	</div>
	<div class="input-container" id="last-name">
	<input type="text" name="last-name" placeholder="Last name"/>
	<label for="last-name">Last name</label>
	</div>
	<div class="input-container" id="address">
	<input type="text" name="address" placeholder="Address"/>
	<label for="address">Address</label>
	</div>
	<div class="input-container" id="postal">
	<input type="text" name="postal" placeholder="Postal Code" maxlength="6" />
	<label for="postal">Postal Code</label>
	</div>
	<div class="input-container" id="city">
	<input type="text" name="city" placeholder="City"/>
	<label for="city">City</label>
	</div>
	<div class="input-container" id="city">
	<input type="text" name="city" placeholder="Generic Placeholder"/>
	<label for="city">Generic Label</label>
	</div>
	</fieldset>
	</form>
	</div>
	</body>
	// ----
	// libsass (v3.2.5)
	// ----

	$labelTextColor: #0075d5;
	$hintTextColor: #ACACAC;
	$formTextColor: #333333;

	$pseudoIndent: 1px; //indent necessary for blinking cursor, placeholder text can't hover over

	$secondInputPadding: 1px .4em 1px .4em; // only for appending fields
	$defaultPadding: 1px;
	$borderSize: 1px;
	$fontSizeForm: 1em;
	$fontSizeLabel: .65em;

	$letterSpacing: 0.012em;
	$inputTop: 1.2em;

	$animations: labelIn, labelOut;
	$animationTime: .35s;
	$ease: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */

	$fontStack: "Helvetica Neue", Helvetica, Arial;

	@mixin placeholders() {
	&::-webkit-input-placeholder { @content; }
	&:-moz-placeholder { @content; }
	&::-moz-placeholder { @content; }
	&:-ms-input-placeholder { @content; }
	}

	form {
	padding-top: 2em;
	min-width: 440px;
	max-width: 700px;
	width: 80%;
	margin: auto;

	opacity: 0;
	animation: fadeIn .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) $animationTime/2 1 normal forwards;
	@keyframes fadeIn {
	from {opacity: 0;} to { opacity: 1;}
	}

	fieldset {
	display: block;
	border: 0;// override browser default
	.input-container:last-child {
	border-bottom-width: 0px;
	}
	}
	legend {
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: center;
	color: #71767C;
	border-bottom: 1px solid #71767C;
	width: 100%;
	height: 2em;
	line-height: 2em;
	}
	.input-container {
	position: relative;
	height: 2.9em;
	border: 0px solid #ECECEC;
	border-bottom-width: $borderSize;
	}
	//-----------------------------
	$letterSpacing: 0.012em;
	$inputTop: 1.2em;
	input {
	display: block;
	position: absolute;
	box-sizing: border-box;
	width: 100%;
	border: 0;
	top: $inputTop;
	background: none;
	z-index: 1;
	padding: $defaultPadding ;
	font-size: $fontSizeForm;
	font-family: $fontStack;
	letter-spacing: $letterSpacing;
	}
	input {
	@include placeholders {
	position: relative;
	top: -1em;
	opacity: 1;
	left: $pseudoIndent;
	padding: 1.2em 0; //sets the vertical placement of the "empty" state
	overflow: visible;
	color: rgba(#ACACAC, 1);
	background: rgba(255,255,255,1);
	transition: all 0.25s $ease;
	}
	}
	label {
	font-family: $fontStack;
	position: absolute;
	left: $pseudoIndent + 1;
	margin-top: 2px;
	padding: $defaultPadding;
	letter-spacing: $letterSpacing;
	color: $hintTextColor;
	font-size: $fontSizeForm * .65;
	color: $labelTextColor;
	}
	input:focus {
	+ label {
	animation: labelIn .25s $ease forwards;
	}
	@include placeholders() {
	left: $pseudoIndent + 10;
	color: rgba(255,255,255,0);
	background: rgba(255,255,255,0);
	}
	}
	*:focus {
	outline: 0;
	}
	}
	@keyframes labelIn {
	from {
	left: $pseudoIndent + 20;
	}
	to {
	left: $pseudoIndent + 1;
	}
	}