Add compact text input styling (#228)

- closes #202
codeforamerica · Dec 21, 2020 · 3f63cc6 · 3f63cc6
1 parent ba58da3
commit 3f63cc6
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 8 deletions.
diff --git a/app/assets/stylesheets/_honeycrisp-compact.scss b/app/assets/stylesheets/_honeycrisp-compact.scss
@@ -9,6 +9,10 @@
     }
   }
 
+  .form-group {
+    margin-bottom: $s35;
+  }
+
   .form-question {
     margin-bottom: $s15;
   }
@@ -30,6 +34,16 @@
     }
   }
 
+
+  .text-input {
+    padding: 0 $s15;
+    height: 4.5rem;
+    border-width: 1px;
+    font-size: $font-size-25-small;
+    font-weight: normal;
+    margin-bottom: 2rem;
+  }
+
   .select {
     line-height: 4.6rem;
     height: 4.6rem;

diff --git a/app/views/examples/honeycrisp_compact/_form_elements.html.erb b/app/views/examples/honeycrisp_compact/_form_elements.html.erb
@@ -1,11 +1,34 @@
 <div class="honeycrisp-compact">
-  <label for="apple_quality" class="form-question">What's your favorite apple quality?</label>
-  <div class="select">
-    <select class="select__element" name="apple_quality" id="apple_quality">
-      <option selected disabled>Choose a selection</option>
-      <option value="crisp">Crisp</option>
-      <option value="sweet">Sweet</option>
-      <option value="tart">Tart</option>
-    </select>
+
+  <div class="form-group">
+    <label class="form-question" for="apple_comment">What would you like to tell us about apples?</label>
+    <input type="text" class="text-input" name="apple_comment" id="apple_comment">
+  </div>
+
+  <div class="form-group">
+    <label class="form-question" for="favorite_apples">What are your favorite apples?</label>
+    <input type="text" class="text-input form-width--long" name="favorite_apples" id="favorite_apples">
+  </div>
+
+  <div class="form-group">
+    <label class="form-question" for="them_apples">How about them apples?</label>
+    <input type="text" class="text-input form-width--med" name="them_apples" id="them_apples">
+  </div>
+
+  <div class="form-group">
+    <label class="form-question" for="phone">What is your phone number?</label>
+    <input type="tel" class="text-input form-width--phone phone-input" name="phone" id="phone">
+  </div>
+
+  <div class="form-group">
+    <label for="apple_quality" class="form-question">What's your favorite apple quality?</label>
+    <div class="select">
+      <select class="select__element" name="apple_quality" id="apple_quality">
+        <option selected disabled>Choose a selection</option>
+        <option value="crisp">Crisp</option>
+        <option value="sweet">Sweet</option>
+        <option value="tart">Tart</option>
+      </select>
+    </div>
   </div>
 </div>