Merge pull request #627 from 18F/contact-form-styles

Contact form styles

scss/components/_cards.scss

@@ -270,7 +270,7 @@
 
     &.i-elections {
       @include u-icon-bg($person-location, $primary-contrast);
-    } 
+    }
   }
 }
 
@@ -302,7 +302,11 @@
       @include u-icon-bg($updates, $secondary-contrast);
       background-size: 60%;
     }
-
+
+    &.i-question-bubble {
+      @include u-icon-bg($question-bubble, $secondary-contrast);
+      background-size: 80%;
+    }
   }
 }
 

scss/components/_components.scss

@@ -12,6 +12,7 @@
 @import 'callouts';
 @import 'cards';
 @import 'charts'; // REFACTOR
+@import 'contact-form';
 @import 'contact-items'; // REFACTOR: https://github.com/18F/fec-style/issues/295
 @import 'cycle-select';
 @import 'date-grid';

scss/components/_contact-form.scss

@@ -0,0 +1,52 @@
+.contact-form {
+  padding: u(2rem);
+
+  .contact-form__element {
+    padding: u(1rem 0);
+  }
+
+  textarea {
+    height: u(15rem);
+  }
+
+  .tt-input {
+    @include u-icon-bg($magnifying-glass-arrow, $gray-dark);
+    background-position: right 10px top 50%;
+  }
+
+  .hr--light {
+    border: 1px solid $gray;
+    display: block;
+    margin: u(2rem 0 2rem);
+  }
+
+  .hr--dark {
+    border: 1px solid $gray-dark;
+    display: block;
+    margin-top: u(2rem);
+  }
+
+  .contact-form__reset {
+    display: block;
+    padding-top: u(2rem);
+  }
+
+  @include media($med) {
+    @include span-columns(9);
+    padding: u(4rem 0);
+
+    .contact-form__element {
+      @include span-columns(7 of 10);
+      @include shift(1);
+    }
+
+    input,
+    select {
+      @include span-columns(6 of 7);
+    }
+
+    .tt-input {
+      width: 100%;
+    }
+  }
+}

scss/components/_form-styles.scss

@@ -125,6 +125,11 @@
   margin-bottom: u(.5rem);
   padding: 0;
   text-transform: uppercase;
+
+  .label__optional {
+    text-transform: none;
+    font-weight: normal;
+  }
 }
 
 .label--help {
@@ -307,3 +312,12 @@
   display: inline-block;
 }
 
+// Conditional field
+// When a field appears conditionally, i.e. when selecting an option reveals
+// a new text input
+.conditional-field {
+  border-left: 8px solid $gray;
+  padding: u(2rem);
+  margin-bottom: u(2rem);
+}
+

scss/elements/_forms.scss

@@ -69,7 +69,7 @@ select {
   width: auto;
   background-color: transparent;
   background-repeat: no-repeat;
-  background-position: 90% 50%;
+  background-position: right u(2rem) top 50%;
   background-size: 12px;
   color: $base;
   border: 2px solid $gray;