From 22ccd237bf9ea1aba0690f1f4150d3af3c19ae6a Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Tue, 14 Aug 2018 11:24:51 -0400
Subject: [PATCH] General form styles

---
 styles/atat.scss              |  2 +
 styles/components/_forms.scss | 88 +++++++++++++++++++++++++++++++++++
 styles/elements/_inputs.scss  | 46 ------------------
 3 files changed, 90 insertions(+), 46 deletions(-)
 create mode 100644 styles/components/_forms.scss

diff --git a/styles/atat.scss b/styles/atat.scss
index 2a65b8d9..bb29e97f 100644
--- a/styles/atat.scss
+++ b/styles/atat.scss
@@ -3,6 +3,7 @@
 
 @import 'core/grid';
 @import 'core/util';
+@import 'core/transitions';
 
 @import 'elements/typography';
 @import 'elements/icons';
@@ -30,6 +31,7 @@
 @import 'components/footer';
 @import 'components/progress_menu.scss';
 @import 'components/search_bar';
+@import 'components/forms';
 
 @import 'sections/login';
 @import 'sections/request_approval';
diff --git a/styles/components/_forms.scss b/styles/components/_forms.scss
new file mode 100644
index 00000000..62c2200d
--- /dev/null
+++ b/styles/components/_forms.scss
@@ -0,0 +1,88 @@
+// Form Grid
+.form-row {
+  margin: ($gap * 4) 0;
+
+  .form-col {
+    flex-grow: 1;
+
+    &:first-child .usa-input {
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+
+    &:last-child .usa-input {
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+
+  @include media($medium-screen) {
+    @include grid-row;
+    align-items: flex-start;
+
+    .form-col {
+      .usa-input {
+        margin-left: ($gap * 4);
+        margin-right: ($gap * 4);
+      }
+
+      &:first-child {
+        .usa-input {
+          margin-left: 0;
+        }
+      }
+
+      &:last-child {
+        .usa-input {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+}
+
+
+.form__sub-fields {
+  // background-color: $color-aqua-lightest;
+  // padding: $gap;
+  // margin: ($gap * 4) 0;
+  @include alert;
+  @include alert-level('default');
+
+  // @include media($medium-screen) {
+  //   padding: $gap * 2;
+  // }
+
+  // @include media($large-screen) {
+  //   padding: $gap * 4;
+  // }
+
+  .usa-input {
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  h1, h2, h3, h4, h5, h6, legend {
+    @include h3;
+
+    margin: ($gap * 4) 0;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &.usa-sr-only {
+      + .usa-input {
+        margin-top: 0;
+      }
+    }
+  }
+}
+
diff --git a/styles/elements/_inputs.scss b/styles/elements/_inputs.scss
index 97a6642f..3bf06523 100644
--- a/styles/elements/_inputs.scss
+++ b/styles/elements/_inputs.scss
@@ -225,49 +225,3 @@ select {
   }
 
 }
-
-
-// Form Grid
-.form-row {
-  margin: ($gap * 4) 0;
-
-  .form-col {
-    flex-grow: 1;
-
-    &:first-child .usa-input {
-      &:first-child {
-        margin-top: 0;
-      }
-    }
-
-    &:last-child .usa-input {
-      &:first-child {
-        margin-top: 0;
-      }
-    }
-  }
-
-  @include media($medium-screen) {
-    @include grid-row;
-    align-items: flex-start;
-
-    .form-col {
-      .usa-input {
-        margin-left: ($gap * 4);
-        margin-right: ($gap * 4);
-      }
-
-      &:first-child {
-        .usa-input {
-          margin-left: 0;
-        }
-      }
-
-      &:last-child {
-        .usa-input {
-          margin-right: 0;
-        }
-      }
-    }
-  }
-}