feat: adds confirmation modal

assets/stylesheets/bootstrap/_modals.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 //
 // Modals
 // --------------------------------------------------
@@ -167,3 +168,51 @@
   line-height: 1.6;
   color: $black;
 }
+
+.o-confirmation-modal {
+  .modal-dialog {
+    max-width: 32.3076923077rem;
+  }
+
+  .modal-image {
+    margin: $modal-inner-padding $modal-inner-padding 0;
+  }
+
+  .modal-header {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: flex-start;
+    padding-bottom: 0;
+    border-bottom: 0;
+  }
+
+  .modal-body {
+    position: relative;
+    // Enable `flex-grow: 1` so that the body take up as much space as possible
+    // when there should be a fixed height on `.modal-dialog`.
+    flex: 1 1 auto;
+  }
+
+  .modal-content {
+    display: flex;
+    flex-direction: column;
+    padding: math.div($modal-inner-padding, 2);
+    border-radius: 0.6153846154rem;
+    font-size: 1.2307692308rem;
+  }
+
+  .modal-title {
+    font-size: 2.3076923077rem;
+  }
+
+  .modal-footer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-shrink: 0;
+    align-items: center; // vertically center
+    justify-content: flex-start;
+    background-color: transparent;
+    border-color: transparent;
+  }
+}

index.html

@@ -885,6 +885,7 @@ <h2>Modals</h2>
             Show classic modal
           </button>
           <button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#modal-alt">Show new modal</button>
+          <button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#confirmation-modal">Show confirmation modal</button>
         </div>
       </div>
     </section>
@@ -919,7 +920,7 @@ <h2>Accordion a.k.a Collapse</h2>
         <h2>Details/Summary </h2>
         <details>
           <summary>Details</summary>
-          
+
           <div class="col-md-6">
             <div class="form-group">
               <label for="details-input">A six col input</label>
@@ -976,6 +977,33 @@ <h4 class="o-modal-title" id="modal-alt-label">Modal title</h4>
       <!-- /.modal-dialog -->
     </div>
     <!-- /.modal -->
+
+    <div class="modal o-confirmation-modal fade" id="confirmation-modal" tabindex="-1" role="dialog" aria-labelledby="confirmation-label" aria-hidden="true">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <img src="assets/images/discard.svg" class="modal-image" alt="" width="149" height="158" />
+          <div class="modal-header">
+            <h2 class="modal-title" id="confirmation-label">Are you sure?</h2>
+          </div>
+          <div class="modal-body">
+            <p>
+              You will lose your unsaved data.
+            </p>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-lg btn-danger" data-bs-dismiss="modal">
+              Yes
+            </button>
+            <button type="button" class="btn btn-lg btn-default" data-dismiss="modal">
+              Cancel
+            </button>
+          </div>
+        </div>
+        <!-- /.modal-content -->
+      </div>
+      <!-- /.modal-dialog -->
+    </div>
+
   </main>
 </body>
 <div