From 0d3387b0fe2fbf963f9402c52c5a4bcf67900a9f Mon Sep 17 00:00:00 2001
From: dandds <dan-ctr@friends.dds.mil>
Date: Sun, 24 Mar 2019 16:10:52 -0400
Subject: [PATCH] styles for multi-step header in modal form

---
 static/icons/checkmark-alt.svg                |  1 +
 styles/components/_modal.scss                 | 19 +++++++++++++++++++
 .../components/multi_step_modal_form.html     |  2 +-
 3 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 static/icons/checkmark-alt.svg

diff --git a/static/icons/checkmark-alt.svg b/static/icons/checkmark-alt.svg
new file mode 100644
index 00000000..b674534c
--- /dev/null
+++ b/static/icons/checkmark-alt.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><path d="M434.539,98.499l-38.828-38.828c-5.324-5.328-11.799-7.993-19.41-7.993c-7.618,0-14.093,2.665-19.417,7.993L169.59,247.248 l-83.939-84.225c-5.33-5.33-11.801-7.992-19.412-7.992c-7.616,0-14.087,2.662-19.417,7.992L7.994,201.852 C2.664,207.181,0,213.654,0,221.269c0,7.609,2.664,14.088,7.994,19.416l103.351,103.349l38.831,38.828 c5.327,5.332,11.8,7.994,19.414,7.994c7.611,0,14.084-2.669,19.414-7.994l38.83-38.828L434.539,137.33 c5.325-5.33,7.994-11.802,7.994-19.417C442.537,110.302,439.864,103.829,434.539,98.499z" fill="#fff" fill-rule="nonzero"/></svg>
diff --git a/styles/components/_modal.scss b/styles/components/_modal.scss
index 90015844..db54378f 100644
--- a/styles/components/_modal.scss
+++ b/styles/components/_modal.scss
@@ -139,4 +139,23 @@ body {
       }
     }
   }
+
+  .modal--form {
+    .progress-menu ul {
+      width: 40%;
+      margin-left: 30%;
+      font-size: 2rem;
+
+      .progress-menu__item::before {
+        width: 2.8rem;
+        height: 2.8rem;
+        margin-left: -1.25rem;
+      }
+
+      .progress-menu__item--complete::before {
+        content: url('#{$asset-path}/icons/checkmark-alt.svg');
+        padding-top: 0.4rem;
+      }
+    }
+  }
 }
diff --git a/templates/components/multi_step_modal_form.html b/templates/components/multi_step_modal_form.html
index f31323b8..62703344 100644
--- a/templates/components/multi_step_modal_form.html
+++ b/templates/components/multi_step_modal_form.html
@@ -33,7 +33,7 @@
         {{ form.csrf_token }}
         {% call Modal(name=name, dismissable=dismissable) %}
           {% for step in steps %}
-            <div v-show="step === {{ loop.index0 }}">
+            <div class="modal--form" v-show="step === {{ loop.index0 }}">
               {{ FormSteps(step_count, loop.index) }}
               {{ step }}
             </div>