From d8f7f7e912a43d53d1ca4f49ce9a657f25902e37 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Wed, 12 Jun 2019 16:44:59 -0400
Subject: [PATCH] Fix spacing on CLIN type and number, use .form-row in macro

---
 styles/sections/_task_order.scss | 42 +++++++++++++++++++++++---------
 templates/task_orders/edit.html  | 14 +++++------
 2 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss
index a2b72229..c72f990b 100644
--- a/styles/sections/_task_order.scss
+++ b/styles/sections/_task_order.scss
@@ -83,7 +83,29 @@
     }
 
     .usa-input {
-      margin: $gap 0;
+      margin-top: $gap;
+      margin-bottom: $gap;
+    }
+
+    .form-row {
+      margin-bottom: 0;
+
+      .usa-input {
+        margin-left: $gap;
+        margin-right: $gap;
+      }
+
+      .form-col:first-child {
+        .usa-input {
+          margin-left: 0;
+        }
+      }
+
+      .form-col:last-child {
+        .usa-input {
+          margin-right: 0;
+        }
+      }
     }
 
     .task-order__loa-fieldset {
@@ -105,7 +127,13 @@
     }
 
     button.icon-link {
-      padding: $gap * 3 0 0;
+      margin-top: 0;
+      margin-left: 0;
+      padding-left: 0;
+
+      &.icon-link__add-another-clin {
+        margin-top: $gap * 3;
+      }
     }
 
     .task-order__pdf-help-text {
@@ -113,16 +141,6 @@
     }
   }
 
-  .row.row__form-fields {
-    .col {
-      margin-left: $gap;
-    }
-
-    .col:first-child {
-      margin-left: 0;
-    }
-  }
-
   .panel {
     @include shadow-panel;
   }
diff --git a/templates/task_orders/edit.html b/templates/task_orders/edit.html
index a2961843..edaae783 100644
--- a/templates/task_orders/edit.html
+++ b/templates/task_orders/edit.html
@@ -60,11 +60,11 @@
     v-bind:initial-loa-count="{{ fields.loas.data | length }}"
     inline-template>
     <div>
-      <div class="row row__form-fields">
-        <div class="col">
+      <div class="form-row">
+        <div class="form-col form-col--two-thirds">
           {{ OptionsInput(fields.jedi_clin_type) }}
         </div>
-        <div class="col">
+        <div class="form-col form-col--third">
           {{ TextInput(fields.number) }}
         </div>
       </div>
@@ -144,8 +144,8 @@
                 <hr v-if="clinIndex !== 0">
                 <clin-fields v-bind:initial-clin-index='clinIndex' inline-template>
                   <div>
-                    <div class="row row__form-fields">
-                      <div class="col">
+                    <div class="form-row">
+                      <div class="form-col form-col--two-thirds">
                         <div class="usa-input">
                           <fieldset data-ally-disabled="true" class="usa-input__choices">
                               <legend>
@@ -162,7 +162,7 @@
                           </fieldset>
                         </div>
                       </div>
-                      <div class="col">
+                      <div class="form-col form-col--third">
                         <textinput :name="'clins-' + clinIndex + '-number'" inline-template>
                           <div class="usa-input">
                             <label :for="name">
@@ -357,7 +357,7 @@
               </div>
 
               <button
-                class="icon-link"
+                class="icon-link icon-link__add-another-clin"
                 v-on:click="addClin"
                 type="button">
                 {{ Icon('plus') }}