animated-form

animated-form.markdown

animated-form

A Pen by Michael Weslander on CodePen.

License.

index.pug

body(ng-app='app' ng-controller='contact')
  h1 {{name}}
  form(novalidate, name='contactForm', ng-submit='submitContactForm()')
    fieldset
      .form-group
        label.form-group__label(for='contactName') 1. 
          span(ng-hide='contact.name') What is your name?
          span(ng-show='contact.name') Hi, {{contact.name}}
        input(type='text', name='contactName', ng-model='contact.name', ng-model-options='{debounce: {default: 750, blur: 0}}')
      .form-group(ng-show='contact.name')
        label.form-group__label(for='generalQuestion') Ask away.
        textarea(id='generalQuestion', name='generalQuestion', ng-model='contact.mainQuestion')
      button.button.button--block(ng-show='contact.name', ng-disabled='contactForm.$invalid') Submit

script.coffeescript

'use strict'

angular.module('app', [])
  .controller 'contact', ($scope)->
    $scope.name = 'Contact Form'
    $scope.clearName = ->
      scope.contact.name = ''

    $scope.submitContactForm = ->
      console.log('mike')
      console.log(scope)

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-messages.js"></script>

style.scss

// Fonts
$base-font-size: 16px;
$base-font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

// Colors
$blue: #2b16ff;
$orange: #ffa42e;
$light-gray: #b1b1b1;
$dark-gray: #3b3b3b;
$base-background-color: #fff;
$base-font-color: $dark-gray;
$action-color: $blue;

// Spacing
$base-spacing: $base-font-size * 1.5;
$small-spacing: $base-spacing / 2;

// Forms
$form-box-shadow: inset 0 0 0 1px $light-gray;
$form-box-shadow-hover: inset 0 0 0 1px $dark-gray;
$form-box-shadow-focus: inset 0 0 0 1px $blue;

// Animations
$base-duration: 150ms;
$base-timing: ease;

// Line Height
$base-line-height: 1.5;

body {
  background-color: $base-background-color;
  width: 50%;
  margin: 0 auto;
}

h1 {
  text-align: center;
  color: $orange;
}

// BUTTONS
%button {
  position: relative;
  display: inline-block;
  padding: $base-spacing * 0.25;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-font-smoothing: inherit;
  text-align: center;
  transition: all 0.1s ease-in-out;
  user-select: none;
  vertical-align: middle;
}

button {
  @extend %button;
}

.button {
  @extend %button;
  padding: ($base-spacing * 0.5) ($base-spacing * 1.5);
  background: $blue;
  color: #fff;
  font-size: $base-font-size;
  line-height: $base-line-height;
  transition: all 0.2s ease-in-out;

  &:focus,
  &:hover {
    background: shade($blue, 20%);
    color: #fff;
  }

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

  + .button {
    margin-left: $base-spacing * 0.125;
  }
}

// FORM

form {
  max-width: 500px;
  margin-right: auto;
  margin-left: auto;

  > *:last-child {
    margin-bottom: 0;
  }
}

fieldset {
  margin: 0;
  margin-bottom: $base-spacing * 0.5;
  padding: 0;
  border: 0;
}

.form-group {
  margin-bottom: $base-spacing * 0.5;

  &--inline {
    display: flex;
  }
}

input,
label,
select {
  display: block;
  font-family: $base-font-family;
  font-size: $base-font-size;
}

label {
  font-weight: 600;
  margin-bottom: $small-spacing / 2;

  &.required::after {
    content: "*";
  }

  abbr {
    display: none;
  }
}

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
input:not([type]),
textarea,
.select,
select {
  display: block;
  background-color: $base-background-color;
  border: 0;
  border-radius: 0;
  box-shadow: $form-box-shadow;
  box-sizing: border-box;
  color: $light-gray;
  font-family: $base-font-family;
  font-size: $base-font-size;
  line-height: 1.5;
  padding: $base-spacing * 0.5;
  transition: all $base-duration $base-timing;
  width: 100%;

  &:hover,
  &:focus {
    box-shadow: $form-box-shadow-hover;
    color: $base-font-color;
  }

  &:focus {
    box-shadow: $form-box-shadow-focus;
    color: $base-font-color;
    outline: none;
  }

  &.disabled,
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

textarea {
  resize: vertical;
}

input[type="search"] {
  appearance: none;
}

input[type="checkbox"],
input[type="radio"] {
  display: inline;
  margin-right: $small-spacing / 2;

  + label {
    display: inline-block;
  }
}

input[type="file"] {
  margin-bottom: $small-spacing;
  width: 100%;
}

.select {
  position: relative;
  padding: 0;

  &:after {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding: 0 ($base-spacing * 0.25);
    font-size: 1.5rem;
    line-height: 48px;
    pointer-events: none;
  }
}

select {
  padding: $base-spacing * 0.5;
  max-width: 100%;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;
}

.contact-form {

  .form-group {
    border: 1px solid #b1b1b1;
    padding: 6px 12px;
  }

  label: {
    margin-bottom: 0;
  }

  input, select {
    text-align: center;
    border: 0;
    box-shadow: none;
    color: black;
  }

  input:focus,
  input:hover,
  select:focus,
  select:hover, {
    box-shadow: none;
  }

  input:hover {
    box-shadow: none;
    background-color: #eee;
  }

  input:last-child {
    margin-bottom: 24px;
  }
}