ensl.org/app/assets/stylesheets/components/_forms.scss

/*
  Forms
*/

form {
  .inline {
    float: left;
    display: inline-block;
    width: auto;
    margin-bottom: em(20);

    input {
      margin-bottom: 0;
    }
  }

  .fields {
    > .field_with_errors:first-child,
    > label {
      padding: em(11) 0;
      line-height: em(16);
    }

    > .field_with_errors {

      input,
      textarea {
        border: $input-border-width solid $flash-error;

        &:hover,
        &:focus {
          border-color: $flash-error;
        }

        &:focus {
          color: $input-text;
        }
      }
    }

    .select-wrapper {
      $select-padding: em(7);

      background-color: $input-primary;
      border: $input-border-colour solid $input-border-width;
      position: relative;
      display: inline-block;
      margin-right: em(10);
      float: left;

      select {
        @include appearance(none);
        font-size: $input-font-size;
        font-family: $open-sans;
        float: left;
        display: block;
        width: auto;
        position: relative;
        margin-left: 0;
        border: 0;
        margin: 0;
        padding: $select-padding em(50) $select-padding $input-padding;
        font-size: $input-font-size;

        option {
          font-size: $input-font-size;
        }

        &:focus {
          outline: none;
        }
      }

      &:after {
        font-family: $fontawesome;
        pointer-events: none;
        content: $fa-var-chevron-down;
        font-weight: normal;
        font-style: normal;
        position: absolute;
        top: 0;
        right: 0;
        text-align: center;
        padding-top: em(6);
        width: em(36);
        height: em(32);
        border-left: $input-border-width solid $input-border-colour;
        color: $input-border-colour;
      }

      &:hover {
        border: $input-border-width solid lighten($input-secondary, 20%);

        &:after {
          border-left: $input-border-width solid $input-secondary;
          color: $base-font-color;
        }
      }

      &:focus {
        border: $input-border-width solid $input-secondary;
        color: $input-secondary;
      }
    }

    input[type=text],
    input[type=password],
    input[type=email],
    textarea {
      background-color: $input-primary;
      color: $input-text;
      font-size: $input-font-size;
      padding: $input-padding;
      height: em(40);
      border: $input-border-colour solid $input-border-width;

      &:hover {
        border: $input-border-width solid lighten($input-secondary, 20%);
      }

      &:focus {
        border: $input-border-width solid $input-secondary;
        outline: none;
      }
    }

    input[type=checkbox] {
      @include appearance(none);
      width: em(40);
      height: em(40);
      font-size: $input-font-size;
      padding: $input-padding;
      background-color: $input-primary;
      border: $input-border-colour solid $input-border-width;
      position: relative;
      margin: 0;
      float: left;

      &:focus {
        outline: none;
      }

      &:hover {
        border: $input-border-width solid lighten($input-secondary, 20%);
        cursor: pointer;
      }

      &:checked {
        border-color: $button-secondary;

        &:after {
          content: $fa-var-check;
          pointer-events: none;
          font-family: $fontawesome;
          font-weight: normal;
          font-style: normal;
          position: absolute;
          font-size: em(22);
          top: em(4);
          left: em(5);
          color: $button-secondary;
        }
      }
    }

    textarea {
      height: auto;
      width: 100%;
    }
  }

  .controls {
    margin-bottom: em(20);

    button,
    input[type=submit] {
      @include button($button-secondary);
      margin-bottom: 0;
      outline: none;
    }
  }
}

form.dark {
  .fields {
    input {
      color: white;
      background: $input-dark-background-colour;
      border: $input-dark-border-colour solid $input-dark-border-width;

      &:hover {
        border: $input-dark-border-width solid $input-dark-border-hover-colour;
      }

      &:focus {
        border: $input-dark-border-width solid $input-dark-border-focus-colour;
      }

      &:-webkit-autofill {
        -webkit-text-fill-color: white !important;
        -webkit-box-shadow: 0 0 0px 1000px $input-dark-background-colour inset;
      }
    }
  }


  .controls {
    margin-bottom: 20px;

    button,
    input {
      background-color: $dark-blue;
    }
  }
}

form.square {
  @include span-columns(12);
  margin: em(20) 0;

  .horizontal {
    @include span-columns(12);
    margin-bottom: em(20);

    &.small {
      @include span-columns(6);
    }

    &.medium {
      @include span-columns(9);
    }

    &.large {
      @include span-columns(12);
    }

    > .field_with_errors:first-child,
    > label,
    > .label {
      @include span-columns(3);
      padding: em(11) 0;
      line-height: em(16);
    }

    input[type=text],
    input[type=password],
    input[type=email],  
    textarea {
      @include span-columns(9);
    }

    .inputs {
      @include span-columns(9);

      input[type=text],
      input[type=password],
      input[type=email] {
        width: 100%;
      }
    }
  }

  .controls {
    @include span-columns(9);
    @include shift(3);

    &.inline {
      margin-left: 0;
      width: auto;
    }
  }
}

form.search {

  .query {
    @include span-columns(7 of 9);

    input {
      width: 100%;
    }
  }

  .controls {
    @include span-columns(2 of 9);
    @include shift(0);
    @include omega;

    input {
      width: 100%;
    }
  }
}