fix(modal): update centered modal margins to align with BSV4.beta.3 update

tmorehouse · web-flow · commit f7e80a8fcd11 · 2017-12-12T10:59:52.000-04:00
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
@@ -2,17 +2,24 @@
     /*
       This CSS can be removed once Bootstrap V4.beta.3 is released
       https://github.com/twbs/bootstrap/pull/24510
-      Vertically centered modals are not suited to tall content (the header gets cut off)
       Once BSV4.beta.3 is released, the script section can be moved into the modal.js file
+      V4.beta.3 will be changing modal margin to rem units
     */
     .modal-dialog-centered {
         display: flex;
         align-items: center;
-        min-height: calc(100% - 30px);
+        /* min-height: calc(100% - (1rem * 2)); */
+        min-height: calc(100% - (10px * 2));
     }
     .modal-dialog-centered .modal-content {
         width: 100%;
     }
+    @media (min-width: 576px) {
+        .modal-dialog-centered {
+            /* min-height: calc(100% - (1.75rem * 2)); */
+            min-height: calc(100% - (30px * 2));
+        }
+    }
 </style>
 
 <script>
