Forms

Create a new forms directory

$ midir forms/extends

Add the following to forms/extends/_manifest.scss:

@import "default-inputs";
@import "display-block";

Add the following to forms/extends/_display-block.scss:

%display-block {
  width: 100%;
  display: block;
}

Add the following to _forms.scss:

@import "forms/manifest";
.form {
  ul {
    border-bottom: 1px solid $hotel-gray;
    background-color: $white;
  }
  li {
    border-bottom: 0;
    position: relative;
  }
}
label {
  @extend %display-block;
  position: absolute;
  font-size: em(16);
  top: .5em;
  left: 1em;
  color: orange;
  opacity: 1;
  transition: #{$trans} top, #{$trans} opacity;
  .js-hide-label & {
    top: 1.5em;
}
input[type="text"] {
  @extend %display-block;
  @extend %default-inputs;
}
input[type="email"] {
  @extend %display-block;
  @extend %default-inputs;
}
textarea {
  @extend %display-block;
  @extend %default-inputs;
  height: 8em;