Merge pull request #162 from dod-ccpo/ui/modal-close-button

reposition modal close button

styles/components/_modal.scss

@@ -29,6 +29,7 @@
       flex-grow: 1;
       overflow-y: auto;
       max-width: 80rem;
+      position: relative;
 
       @include media($medium-screen) {
         padding: $gap * 4;
@@ -39,9 +40,24 @@
         @include h3;
       }
 
-      :first-child {
+      > :first-child {
         margin-top: 0;
       }
+
+      .modal__dismiss {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 8rem;
+      }
+    }
+  }
+
+  &.modal--dismissable {
+    .modal__body {
+      > :first-child {
+        margin-right: 8rem;
+      }
     }
   }
 }

templates/components/modal.html

@@ -2,18 +2,17 @@
 
 {% macro Modal(name, dismissable=False) -%}
 <div v-if='modals.{{name}} === true' v-cloak>
-    <div class='modal'>
+    <div class='modal {% if dismissable %}modal--dismissable{% endif%}'>
       <div class='modal__dialog' role='dialog' aria-modal='true'>
-
-        {% if dismissable %}
-          <button class='icon-link modal__dismiss' v-on:click='closeModal("{{name}}")'>
-            {{ Icon('x') }}
-            <span>Close</span>
-          </button>
-        {% endif %}
-
         <div class='modal__body'>
             {{ caller() }}
+
+            {% if dismissable %}
+              <button class='icon-link modal__dismiss' v-on:click='closeModal("{{name}}")'>
+                {{ Icon('x') }}
+                <span>Close</span>
+              </button>
+            {% endif %}
         </div>
       </div>
     </div>