Add ability to close modals via background

Author: Keenan Payne

dist/concise.css

@@ -1641,6 +1641,16 @@ ol.dropdown-content {
   .modal-close:hover, .modal-close:focus {
     text-decoration: none; }
 
+.modal:target .modal-close--background {
+  display: block;
+  height: 100%;
+  pointer-events: all;
+  position: absolute;
+  width: 100%; }
+  .modal:target .modal-close--background:hover {
+    border-bottom: none;
+    text-decoration: none; }
+
 @media (min-width: 48em) {
   .modal--small .modal-container {
     width: 360px; } }

dist/concise.min.css

@@ -77,6 +77,19 @@
   &:focus { text-decoration: none; }
 }
 
+.modal:target .modal-close--background {
+  display: block;
+  height: 100%;
+  pointer-events: all;
+  position: absolute;
+  width: 100%;
+
+  &:hover {
+    border-bottom: none;
+    text-decoration: none;
+  }
+}
+
 
 //
 // Modifiers

src/addons/concise-ui/components/_modals.scss

@@ -490,6 +490,8 @@ <h6>Heading 6 <small>Helper text</small></h6>
   <div class="spinner"></div>
 
   <div id="modal" class="modal">
+    <a href="#close" class="modal-close modal-close--background"></a>
+
     <div class="modal-container">
       <div class="modal-header">
         Modal Header