form-jekyll 0.3.0

data/assets/css/main.scss

@@ -0,0 +1,886 @@
+---
+---
+
+@import 'variables';
+
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+label,
+.label,
+legend {
+  display: block;
+  margin: 0 0 0.25rem;
+  padding: 0;
+  line-height: 1.5;
+}
+
+div[data-group] {
+  display: none;
+}
+
+label:empty,
+legend:empty,
+p:empty {
+  margin: 0;
+}
+
+.field-legend:after,
+.field-wrapper:after,
+.form-group:after {
+  display: table;
+  content: "";
+  clear: both;
+}
+
+.valtype {
+  input,
+  label {
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+}
+
+input,
+textarea {
+  border: 1px solid #777;
+  width: 100%;
+  padding: 0.5rem;
+}
+
+textarea {
+  resize: vertical;
+  &.textarea-small {
+    height: 1.75rem * 3;
+  }
+
+  &.textarea-medium {
+    height: 1.75rem * 5;
+  }
+
+  &.textarea-large {
+    height: 1.75rem * 9;
+  }
+}
+
+.help-block {
+  margin: 0.5rem 0 0;
+  color: #666;
+}
+
+.help-block ul {
+  margin: 0;
+}
+
+.help-block.with-errors:empty {
+  height: 0;
+}
+
+.help-block .list-unstyled {
+  padding: 0;
+}
+
+.has-error .help-block {
+  color: red;
+}
+
+.form-section,
+.form-section-header {
+  display: none;
+}
+
+.form-section.active,
+.form-section-header.active {
+  display: block;
+}
+
+.form-section-header {
+  font-size: 1.5em;
+}
+
+.form-section-prev,
+.form-section-next {
+  margin-top: 1.5rem;
+}
+
+.form-section-prev {
+  float: left;
+}
+
+.form-section-next {
+  float: right;
+}
+
+.form-section-nav {
+  display: none;
+}
+
+.form-section-nav li {
+  list-style: none;
+  padding: 0.5rem 1rem;
+  display: block;
+}
+
+.form-section-nav li.active {
+  font-weight: bold;
+  position: relative;
+}
+
+.form-section-nav li.active:before {
+  content: "";
+  border-radius: 50%;
+  width: 0.5rem;
+  height: 0.5rem;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  margin-top: -0.25rem;
+  background: currentColor;
+}
+
+@media screen and (min-width: 40rem) {
+  .form-section-nav,
+  .form-horizontal {
+    float: left;
+  }
+
+  .form-section-nav {
+    display: block;
+    width: 20%;
+    margin-right: 5%;
+  }
+
+  .form-horizontal {
+    width: 60%;
+  }
+}
+
+@media screen and (min-width: 70rem) {
+  .form-section-nav {
+    width: 15%;
+    margin-right: 5%;
+  }
+
+  .form-horizontal {
+    width: 70%;
+  }
+}
+
+/* Hacks */
+
+ input[formtype="m11"] {
+    display: none;
+ }
+
+/* Add a cursor to .form-section-nav elements */
+.form-section-nav li {
+  cursor: pointer;
+}
+
+/* Label .form-section-nav */
+
+.form-section-nav {
+  position: relative;
+  padding-top: 1rem;
+}
+
+.form-section-nav:before {
+  content: "Choose a Page";
+  position: absolute;
+  font-size: 1.25rem;
+  color: #666;
+  top: -1rem;
+}
+
+/* Only display legend to screen readers*/
+
+#SFDSWFB-legend {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+// Branding stylesheet
+
+@import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500');
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+// Mixins
+
+@mixin font-smoothing {
+  -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+@mixin font-size-to-rem($number) {
+  font-size: ($number * 1rem) / $base-font-size;
+}
+
+@mixin line-height-to-rem($number) {
+  line-height: $number * 1rem / $base-font-size;
+}
+
+@mixin input-border {
+  border-color: $slate-blue;
+  border-width: 2px;
+  border-style: solid;
+  border-radius: 8px;
+  background-color: $white;
+}
+
+@mixin input-border-focus {
+  border-color: $bright-blue;
+  box-shadow: inset 0 0 0 2px $bright-blue;
+  outline: none;
+}
+
+// Global styles
+
+body,
+input,
+textarea,
+select,
+button {
+  @include rubik;
+  @include fs-body-short;
+  color: $slate-blue;
+  font-weight: $t-normal;
+  -webkit-font-size-adjust: 100%;
+}
+
+input,
+textarea,
+select {
+  color: $slate-blue;
+}
+
+.site {
+  font-size: 1.0625em;
+}
+
+label,
+legend {
+  font-size: (24em / 17);
+  letter-spacing: -0.016em;
+  line-height: 1.5;
+  @include font-smoothing;
+  margin-bottom: 0.5rem;
+}
+
+legend {
+  margin-bottom: 0.75rem;
+}
+
+b, strong {
+  font-weight: $t-bold;
+}
+
+// Make italic fonts bold, since we're
+// not loading italic font weights
+em, i {
+  font-style: normal;
+  font-weight: $t-bold;
+}
+
+input,
+textarea,
+select {
+  @include input-border;
+  border-radius: 8px;
+  &:focus {
+    @include input-border-focus;
+  }
+}
+
+input[type='text'],
+input[type='email'],
+input[type='url'],
+input[type='tel'],
+input[type='number'],
+input[type='password'],
+input[type='date'],
+input[type='time'],
+input[type='search'],
+textarea,
+select {
+  padding: 0.64rem 1rem;
+}
+
+// Cross-browser consistency / bug fixes
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button,
+input::-webkit-calendar-picker-indicator {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+input[type=number] {
+    -moz-appearance: textfield;
+}
+
+input[type='search'] {
+  -webkit-appearance: none;
+}
+
+::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+  color: rgba($slate-blue, 0.6);
+}
+::-moz-placeholder { /* Firefox 19+ */
+  color: rgba($slate-blue, 0.6);
+}
+:-ms-input-placeholder { /* IE 10+ */
+  color: rgba($slate-blue, 0.6);
+}
+:-moz-placeholder { /* Firefox 18- */
+  color: rgba($slate-blue, 0.6);
+}
+
+button,
+input[type='submit'] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+input[type='date'],
+input[type='time'] {
+  // Fix styling inconsistencies with
+  // date and time inputs on iOS
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  min-height: 3rem;
+}
+
+input[type='file'] {
+  border: none;
+  padding: 0;
+}
+
+// Checkbox and radio button styles
+
+$rc-size: 3rem;
+
+.checkbox,
+.radio {
+  position: relative;
+  padding-left: $rc-size + 0.75rem;
+  margin-bottom: 1rem;
+  min-height: $rc-size;
+
+  input,
+  span::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: $rc-size;
+    height: $rc-size;
+  }
+
+  input {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+    &:focus + span:before {
+      @include input-border-focus;
+    }
+  }
+
+  span {
+    display: block;
+    font-size: initial;
+    padding-top: 0.75rem;
+    &::before {
+      content: '';
+      @include input-border;
+    }
+  }
+}
+
+.radio {
+  span::before,
+  span::after {
+    border-radius: 50%;
+  }
+
+  span::after {
+    content: '';
+    width: $rc-size * 0.625;
+    height: $rc-size * 0.625;
+    top: $rc-size * 0.1875;
+    left: $rc-size * 0.1875;
+    z-index: 2;
+    position: absolute;
+  }
+
+  input:checked {
+   + span::after {
+      background: $slate-blue;
+    }
+
+    &:focus + span:after {
+      background: $bright-blue;
+    }
+  }
+
+  input:focus + span:before {
+    background: $white;
+  }
+}
+
+
+.checkbox input:checked {
+  + span::before {
+    background-size: 50% 40%;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS43NTAwOSAxNi43NTVDNS41ODU3OSAxNi43NTU2IDUuNDIzIDE2LjcyMzYgNS4yNzExMSAxNi42NjFDNS4xMTkyMSAxNi41OTg0IDQuOTgxMjIgMTYuNTA2MyA0Ljg2NTA5IDE2LjM5TDAuMzY1MDkgMTEuODlDMC4yNDU4NzYgMTEuNzc0NiAwLjE1MDg1NCAxMS42MzY1IDAuMDg1NTY3OCAxMS40ODM5QzAuMDIwMjgxMyAxMS4zMzEzIC0wLjAxMzk2MjMgMTEuMTY3MiAtMC4wMTUxNjQ5IDExLjAwMTNDLTAuMDE2MzY3NiAxMC44MzUzIDAuMDE1NDk0NyAxMC42NzA3IDAuMDc4NTYyOSAxMC41MTcyQzAuMTQxNjMxIDEwLjM2MzcgMC4yMzQ2NDIgMTAuMjI0MyAwLjM1MjE3IDEwLjEwNzFDMC40Njk2OTcgOS45ODk4OCAwLjYwOTM4OCA5Ljg5NzI2IDAuNzYzMDkgOS44MzQ2M0MwLjkxNjc5MyA5Ljc3MiAxLjA4MTQzIDkuNzQwNiAxLjI0NzQgOS43NDIyN0MxLjQxMzM2IDkuNzQzOTQgMS41NzczMyA5Ljc3ODY1IDEuNzI5NzQgOS44NDQzN0MxLjg4MjE1IDkuOTEwMDkgMi4wMTk5NSAxMC4wMDU1IDIuMTM1MDkgMTAuMTI1TDUuNzUwMDkgMTMuNzRMMTcuODcwMSAxLjYyMDA0QzE4LjEwNjIgMS4zOTI2NSAxOC40MjIxIDEuMjY3MDkgMTguNzQ5OSAxLjI3MDM5QzE5LjA3NzYgMS4yNzM2OSAxOS4zOTA5IDEuNDA1NiAxOS42MjI0IDEuNjM3NjlDMTkuODUzOCAxLjg2OTc5IDE5Ljk4NDkgMi4xODM1MSAxOS45ODcyIDIuNTExMjdDMTkuOTg5NiAyLjgzOTAzIDE5Ljg2MzEgMy4xNTQ2MSAxOS42MzUxIDMuMzkwMDRMNi42MzUwOSAxNi4zOUM2LjUxODk2IDE2LjUwNjMgNi4zODA5NyAxNi41OTg0IDYuMjI5MDcgMTYuNjYxQzYuMDc3MTggMTYuNzIzNiA1LjkxNDM5IDE2Ljc1NTYgNS43NTAwOSAxNi43NTVaIiBmaWxsPSIjMUMzRTU3Ii8+Cjwvc3ZnPg==');
+  }
+
+  &:focus + span::before {
+    background-color: $bright-blue;
+    background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS43NTAwOSAxNi43NTVDNS41ODU3OSAxNi43NTU2IDUuNDIzIDE2LjcyMzYgNS4yNzExMSAxNi42NjFDNS4xMTkyMSAxNi41OTg0IDQuOTgxMjIgMTYuNTA2MyA0Ljg2NTA5IDE2LjM5TDAuMzY1MDkgMTEuODlDMC4yNDU4NzYgMTEuNzc0NiAwLjE1MDg1NCAxMS42MzY1IDAuMDg1NTY3OCAxMS40ODM5QzAuMDIwMjgxMyAxMS4zMzEzIC0wLjAxMzk2MjMgMTEuMTY3MiAtMC4wMTUxNjQ5IDExLjAwMTNDLTAuMDE2MzY3NiAxMC44MzUzIDAuMDE1NDk0NyAxMC42NzA3IDAuMDc4NTYyOSAxMC41MTcyQzAuMTQxNjMxIDEwLjM2MzcgMC4yMzQ2NDIgMTAuMjI0MyAwLjM1MjE3IDEwLjEwNzFDMC40Njk2OTcgOS45ODk4OCAwLjYwOTM4OCA5Ljg5NzI2IDAuNzYzMDkgOS44MzQ2M0MwLjkxNjc5MyA5Ljc3MiAxLjA4MTQzIDkuNzQwNiAxLjI0NzQgOS43NDIyN0MxLjQxMzM2IDkuNzQzOTQgMS41NzczMyA5Ljc3ODY1IDEuNzI5NzQgOS44NDQzN0MxLjg4MjE1IDkuOTEwMDkgMi4wMTk5NSAxMC4wMDU1IDIuMTM1MDkgMTAuMTI1TDUuNzUwMDkgMTMuNzRMMTcuODcwMSAxLjYyMDA0QzE4LjEwNjIgMS4zOTI2NSAxOC40MjIxIDEuMjY3MDkgMTguNzQ5OSAxLjI3MDM5QzE5LjA3NzYgMS4yNzM2OSAxOS4zOTA5IDEuNDA1NiAxOS42MjI0IDEuNjM3NjlDMTkuODUzOCAxLjg2OTc5IDE5Ljk4NDkgMi4xODM1MSAxOS45ODcyIDIuNTExMjdDMTkuOTg5NiAyLjgzOTAzIDE5Ljg2MzEgMy4xNTQ2MSAxOS42MzUxIDMuMzkwMDRMNi42MzUwOSAxNi4zOUM2LjUxODk2IDE2LjUwNjMgNi4zODA5NyAxNi41OTg0IDYuMjI5MDcgMTYuNjYxQzYuMDc3MTggMTYuNzIzNiA1LjkxNDM5IDE2Ljc1NTYgNS43NTAwOSAxNi43NTVaIiBmaWxsPSIjZmZmIi8+Cjwvc3ZnPg==');
+  }
+}
+
+// Buttons
+
+button,
+input[type='submit'],
+.btn {
+  border-radius: $radius;
+  font-weight: $t-bold;
+  padding: 0.75rem 1.5rem;
+  display: inline-block;
+  text-decoration: none;
+  margin: 0 0.4375rem 0.875rem 0;
+}
+
+button,
+input[type='submit'] {
+  border: 3px solid $bright-blue;
+  background: $bright-blue;
+  color: $white;
+  line-height: 1.75;
+  &:hover, &:focus {
+    background: darken($bright-blue, 10%);
+    border-color: darken($bright-blue, 10%);
+  }
+
+  &:active {
+    background: darken($bright-blue, 15%);
+    border-color: darken($bright-blue, 15%);
+  }
+
+  &:hover, &:active, &:focus, &:visited {
+    color: $white;
+    text-decoration: none;
+  }
+}
+
+// Dropdowns
+
+select {
+  display: block;
+  background-repeat: no-repeat;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  // Background gradient needed for <= IE9
+  // See https://www.filamentgroup.com/lab/select-css.html
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguOTYwMDggMTAuNzU1QzguNzk1NzcgMTAuNzU1NiA4LjYzMjk4IDEwLjcyMzYgOC40ODEwOSAxMC42NjFDOC4zMjkyIDEwLjU5ODMgOC4xOTEyMSAxMC41MDYyIDguMDc1MDggMTAuMzlMMC41NzUwNzUgMi44OUMwLjM0MDM1OSAyLjY1NTI4IDAuMjA4NDk2IDIuMzM2OTQgMC4yMDg0OTYgMi4wMDVDMC4yMDg0OTYgMS42NzMwNiAwLjM0MDM1OSAxLjM1NDcxIDAuNTc1MDc1IDEuMTJDMC44MDk3OTIgMC44ODUyOCAxLjEyODE0IDAuNzUzNDE4IDEuNDYwMDggMC43NTM0MThDMS43OTIwMSAwLjc1MzQxOCAyLjExMDM2IDAuODg1MjggMi4zNDUwOCAxLjEyTDguOTYwMDggNy43NEwxNS41NzUxIDEuMTJDMTUuODA5OCAwLjg4NTI4IDE2LjEyODEgMC43NTM0MTggMTYuNDYwMSAwLjc1MzQxOEMxNi43OTIgMC43NTM0MTggMTcuMTEwNCAwLjg4NTI4IDE3LjM0NTEgMS4xMkMxNy41Nzk4IDEuMzU0NzEgMTcuNzExNyAxLjY3MzA2IDE3LjcxMTcgMi4wMDVDMTcuNzExNyAyLjMzNjk0IDE3LjU3OTggMi42NTUyOCAxNy4zNDUxIDIuODlMOS44NDUwOCAxMC4zOUM5LjcyODk0IDEwLjUwNjIgOS41OTA5NSAxMC41OTgzIDkuNDM5MDYgMTAuNjYxQzkuMjg3MTcgMTAuNzIzNiA5LjEyNDM4IDEwLjc1NTYgOC45NjAwOCAxMC43NTVaIiBmaWxsPSIjMUMzRTU3Ii8+Cjwvc3ZnPgo='), linear-gradient(#fff, #fff);
+  &:focus {
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguOTYwMDggMTAuNzU1QzguNzk1NzcgMTAuNzU1NiA4LjYzMjk4IDEwLjcyMzYgOC40ODEwOSAxMC42NjFDOC4zMjkyIDEwLjU5ODMgOC4xOTEyMSAxMC41MDYyIDguMDc1MDggMTAuMzlMMC41NzUwNzUgMi44OUMwLjM0MDM1OSAyLjY1NTI4IDAuMjA4NDk2IDIuMzM2OTQgMC4yMDg0OTYgMi4wMDVDMC4yMDg0OTYgMS42NzMwNiAwLjM0MDM1OSAxLjM1NDcxIDAuNTc1MDc1IDEuMTJDMC44MDk3OTIgMC44ODUyOCAxLjEyODE0IDAuNzUzNDE4IDEuNDYwMDggMC43NTM0MThDMS43OTIwMSAwLjc1MzQxOCAyLjExMDM2IDAuODg1MjggMi4zNDUwOCAxLjEyTDguOTYwMDggNy43NEwxNS41NzUxIDEuMTJDMTUuODA5OCAwLjg4NTI4IDE2LjEyODEgMC43NTM0MTggMTYuNDYwMSAwLjc1MzQxOEMxNi43OTIgMC43NTM0MTggMTcuMTEwNCAwLjg4NTI4IDE3LjM0NTEgMS4xMkMxNy41Nzk4IDEuMzU0NzEgMTcuNzExNyAxLjY3MzA2IDE3LjcxMTcgMi4wMDVDMTcuNzExNyAyLjMzNjk0IDE3LjU3OTggMi42NTUyOCAxNy4zNDUxIDIuODlMOS44NDUwOCAxMC4zOUM5LjcyODk0IDEwLjUwNjIgOS41OTA5NSAxMC41OTgzIDkuNDM5MDYgMTAuNjYxQzkuMjg3MTcgMTAuNzIzNiA5LjEyNDM4IDEwLjc1NTYgOC45NjAwOCAxMC43NTVaIiBmaWxsPSIjNEY2NkVFIi8+Cjwvc3ZnPgo='), linear-gradient(#fff, #fff);
+  }
+  background-size: 18px 11px;
+  background-position: right 1rem top 50%;
+  padding-right: 3rem;
+  border: 2px solid $slate-blue;
+
+  option {
+    font-weight: normal;
+    font-size: 100%;
+  }
+}
+
+select:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 $bright-blue;
+}
+
+select::-ms-expand {
+  // Hide browser-standard chevron on IE
+  display: none;
+}
+
+option:not(:checked) {
+  color: $black;
+}
+
+// Section headers
+
+@mixin h1 {
+  color: $slate-blue;
+  font-weight: $t-bold;
+  margin: 1.75rem 0 0;
+  @include font-size-to-rem(33);
+  @include line-height-to-rem(44);
+  &.title {
+    line-height: normal;
+    font-weight: $t-light;
+  }
+  @media screen and (min-width: 40rem) {
+    @include font-size-to-rem(62);
+    line-height: normal;
+    letter-spacing: -0.3px;
+    &.title {
+      @include font-size-to-rem(50);
+      letter-spacing: 0;
+    }
+  }
+}
+
+@mixin h2 {
+  color: $slate-blue;
+  font-weight: $t-bold;
+  margin: 1.25rem 0 0.875rem;
+  @include font-size-to-rem(40);
+  line-height: normal;
+}
+
+@mixin h3 {
+  color: $slate-blue;
+  font-weight: $t-bold;
+  margin: 1.25rem 0 0.875rem;
+  @include font-size-to-rem(30);
+  @include line-height-to-rem(42);
+}
+
+@mixin h4 {
+  font-weight: $t-normal;
+  margin: 1.25rem 0 0.875rem;
+  @include font-size-to-rem(24);
+  @include line-height-to-rem(34);
+}
+
+@mixin h5 {
+  margin: 1rem 0 0.875rem;
+  font-weight: $t-bold;
+  @include font-size-to-rem(20);
+  @include line-height-to-rem(27);
+}
+
+h1 {
+  @include h1;
+}
+
+h2 {
+  @include h2;
+}
+
+h3 {
+  @include h3;
+}
+
+h4 {
+  @include h4;
+}
+
+h5 {
+  @include h5;
+}
+
+// Form layout
+
+.form-section-header {
+  @include h3;
+  margin-top: 0;
+}
+
+.form-group {
+  margin-bottom: 2.5rem;
+
+  p + &,
+  ul + & {
+    margin-top: 2rem;
+  }
+}
+
+.form-content {
+  @include contain-1090;
+}
+
+.form-content-inner {
+  max-width: 38rem;
+}
+
+.form-section-nav {
+  background: $blue-1;
+  border-radius: $radius;
+  padding: 4.5rem 0 1.5rem;
+
+  &::before {
+    top: 1.75rem;
+    left: 2rem;
+    @include h5;
+    color: $slate-blue;
+    margin-top: 0;
+  }
+
+  li {
+    padding: 1rem 2rem;
+    color: $bright-blue;
+    &.active {
+      font-weight: $t-bold;
+      background: $bright-blue;
+      color: $white;
+      @include font-smoothing;
+
+      &::before {
+        content: none;
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 40rem), screen and (min-width: 70rem) {
+  .form-horizontal {
+    width: 60%;
+  }
+
+  .form-section-nav {
+    width: 33%;
+    margin-right: 5%;
+  }
+}
+
+.help-text {
+  color: $slate-blue;
+  font-size: (15rem / 17);
+
+  p:first-child {
+    margin-top: 0.5rem;
+  }
+
+  p, ul {
+    margin: 0;
+  }
+
+}
+
+.has-error .help-block {
+  font-size: 1rem;
+  background: $red-4;
+  color: $white;
+  padding: 0.25rem 0.75rem;
+  border-radius: $radius;
+  display: inline-block;
+  @include font-smoothing;
+
+  li {
+    list-style-type: none;
+  }
+}
+
+.form-section-prev,
+.form-section-next {
+  border: 3px solid $bright-blue;
+  color: $bright-blue;
+  background-size: 20px 16px;
+  font-weight: $t-bold;
+
+  &:hover, &:focus, &:active {
+    box-shadow: 0 0 0 1px $bright-blue;
+    background-color: rgba($bright-blue, 0.05);
+  }
+}
+
+.form-section-prev {
+  padding-left: 3rem;
+  background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyMCAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuMzY0NjggOC44ODQ5M0w2LjcyOTY4IDE1LjI0OTlDNi44Mzk5MiAxNS4zODQ2IDYuOTc3MDUgMTUuNDk0NyA3LjEzMjI5IDE1LjU3MzNDNy4yODc1NCAxNS42NTE5IDcuNDU3NDkgMTUuNjk3MiA3LjYzMTI1IDE1LjcwNjNDNy44MDUwMSAxNS43MTU0IDcuOTc4NzcgMTUuNjg4MiA4LjE0MTM5IDE1LjYyNjNDOC4zMDQwMiAxNS41NjQ0IDguNDUxOTMgMTUuNDY5MiA4LjU3NTY3IDE1LjM0NjlDOC42OTk0MSAxNS4yMjQ2IDguNzk2MjQgMTUuMDc3NyA4Ljg1OTk3IDE0LjkxNThDOC45MjM3IDE0Ljc1MzkgOC45NTI5MiAxNC41ODA1IDguOTQ1NzcgMTQuNDA2NkM4LjkzODYxIDE0LjIzMjggOC44OTUyNCAxNC4wNjIzIDguODE4NDMgMTMuOTA2MkM4Ljc0MTYxIDEzLjc1MDEgOC42MzMwNSAxMy42MTE3IDguNDk5NjggMTMuNDk5OUw0LjI2OTY4IDkuMjQ5OTNIMTguNzY5N0MxOS4xMDEyIDkuMjQ5OTMgMTkuNDE5MSA5LjExODIzIDE5LjY1MzYgOC44ODM4MUMxOS44ODggOC42NDkzOSAyMC4wMTk3IDguMzMxNDUgMjAuMDE5NyA3Ljk5OTkzQzIwLjAxOTcgNy42Njg0MSAxOS44ODggNy4zNTA0NiAxOS42NTM2IDcuMTE2MDRDMTkuNDE5MSA2Ljg4MTYyIDE5LjEwMTIgNi43NDk5MyAxOC43Njk3IDYuNzQ5OTNINC4yNjk2OEw4LjQ5OTY4IDIuNDk5OTNDOC42OTY5IDIuMjU5MDcgOC43OTcxNSAxLjk1MzMgOC43ODA4MiAxLjY0MjQzQzguNzY0NDkgMS4zMzE1NyA4LjYzMjc1IDEuMDM3OTggOC40MTEzOCAwLjgxOTExOEM4LjE5MDAyIDAuNjAwMjUzIDcuODk0OTUgMC40NzE4NjIgNy41ODM5MiAwLjQ1OTA2NUM3LjI3Mjg5IDAuNDQ2MjY5IDYuOTY4MjggMC41NDk5ODcgNi43Mjk2OCAwLjc0OTkyN0wwLjM2NDY4IDcuMTE0OTNDMC4xMzA3OTggNy4zNTAwOSAtMC4wMDA0ODgyODEgNy42NjgyNiAtMC4wMDA0ODgyODEgNy45OTk5M0MtMC4wMDA0ODgyODEgOC4zMzE1OSAwLjEzMDc5OCA4LjY0OTc3IDAuMzY0NjggOC44ODQ5M1oiIGZpbGw9IiM0RjY2RUUiLz4KPC9zdmc+Cg==')left 1rem top 50% no-repeat;
+}
+
+.form-section-next {
+  padding-right: 3rem;
+  background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyMCAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5LjYzNSA3LjExNDkzTDEzLjI3IDAuNzQ5OTI3QzEzLjAzMTQgMC41NDk5ODcgMTIuNzI2OCAwLjQ0NjI2OSAxMi40MTU4IDAuNDU5MDY1QzEyLjEwNDcgMC40NzE4NjIgMTEuODA5NyAwLjYwMDI1MyAxMS41ODgzIDAuODE5MTE4QzExLjM2NjkgMS4wMzc5OCAxMS4yMzUyIDEuMzMxNTcgMTEuMjE4OSAxLjY0MjQzQzExLjIwMjUgMS45NTMzIDExLjMwMjggMi4yNTkwNyAxMS41IDIuNDk5OTNMMTUuNzMgNi43Mjk5M0gxLjI1QzAuOTE4NDc5IDYuNzI5OTMgMC42MDA1MzcgNi44NjE2MiAwLjM2NjExNyA3LjA5NjA0QzAuMTMxNjk2IDcuMzMwNDYgMCA3LjY0ODQxIDAgNy45Nzk5M0MwIDguMzExNDUgMC4xMzE2OTYgOC42MjkzOSAwLjM2NjExNyA4Ljg2MzgxQzAuNjAwNTM3IDkuMDk4MjMgMC45MTg0NzkgOS4yMjk5MyAxLjI1IDkuMjI5OTNIMTUuNzVMMTEuNSAxMy40OTk5QzExLjI2NTMgMTMuNzM0NiAxMS4xMzM0IDE0LjA1MyAxMS4xMzM0IDE0LjM4NDlDMTEuMTMzNCAxNC43MTY5IDExLjI2NTMgMTUuMDM1MiAxMS41IDE1LjI2OTlDMTEuNzM0NyAxNS41MDQ2IDEyLjA1MzEgMTUuNjM2NSAxMi4zODUgMTUuNjM2NUMxMi43MTY5IDE1LjYzNjUgMTMuMDM1MyAxNS41MDQ2IDEzLjI3IDE1LjI2OTlMMTkuNjM1IDguODg0OTNDMTkuODY4OSA4LjY0OTc3IDIwLjAwMDIgOC4zMzE1OSAyMC4wMDAyIDcuOTk5OTNDMjAuMDAwMiA3LjY2ODI2IDE5Ljg2ODkgNy4zNTAwOSAxOS42MzUgNy4xMTQ5M1oiIGZpbGw9IiM0RjY2RUUiLz4KPC9zdmc+Cg==') right 1rem top 50% no-repeat;
+}
+
+.btn.submit {
+  float: right;
+}
+
+// Field-specific styles
+
+.field-number {
+  input, .units {
+    display: inline-block;
+  }
+
+  .units {
+    margin-left: 0.5rem;
+  }
+}
+
+.field-price {
+  input {
+    width: 10rem;
+  }
+
+  input, .dollar {
+    display: inline-block;
+  }
+
+  .dollar {
+    font-weight: $t-light;
+    font-size: 3rem;
+    line-height: 1;
+    position: relative;
+    top: 0.75rem;
+    margin-right: 0.5rem;
+    color: $slate-blue;
+  }
+}
+
+.field-address {
+  label {
+    font-size: (15rem / 17);
+    margin: 0 0 0.25rem;
+  }
+
+  input {
+    margin-bottom: 0.75rem;
+  }
+}
+
+.optional {
+  opacity: 0.8;
+}
+
+.other-label {
+  margin-top: 0.5rem;
+}
+
+.other-label,
+.other-input {
+  display: inline-block;
+}
+
+.other-input label {
+  font-size: 0;
+  height: 0;
+  margin: 0;
+}
+
+.other-input input {
+  margin-top: 0.25rem;
+  margin-left: 0.5rem;
+  font-size: 0.88rem;
+  line-height: 1;
+  padding: 0.5rem;
+  height: 2.5rem;
+}
+
+@media screen and (min-width: 48rem) {
+  .field-address-state,
+  .field-address-zip {
+    display: inline-block;
+  }
+
+  .field-address-state {
+    margin-right: 0.75rem;
+  }
+}
+
+.field-link {
+  a {
+    display: block;
+    border: 3px solid $bright-blue;
+    padding: 2rem;
+    @include h5;
+    color: $bright-blue;
+    text-decoration: none;
+    border-radius: 8px;
+  }
+}
+
+.field-file {
+  label {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+    height: 6.5rem;
+  }
+
+  input {
+    min-width: 14rem;
+    margin: 0;
+    filter: alpha(opacity=0);
+    opacity: 0;
+  }
+
+  .file-custom {
+    font-size: 1rem;
+    position: absolute;
+    padding-top: 2.75rem;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 5;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+
+    &::after {
+      content: attr(data-filename);
+    }
+
+    &::before {
+      @extend button;
+      z-index: 6;
+      content: "Choose a file";
+      background: $white;
+      color: $bright-blue;
+      background-size: 20px 16px;
+      font-weight: $t-bold;
+    }
+
+    &:hover, &:focus, &:active {
+      &::before {
+        box-shadow: inset 0 0 0 2px darken($bright-blue, 10%);
+        color: darken($bright-blue, 10%);
+        background-color: rgba($bright-blue, 0.05);
+        color: $bright-blue;
+      }
+    }
+  }
+}
+
+// Field length
+
+
+@for $i from 1 to 16 {
+  .length-#{$i} {
+    width: 2.5rem + (0.65rem * $i);
+    margin-bottom: 1rem;
+  }
+}
+
+@import 'sfgov';