Overhaul modal to make it responsive and not super lame

1 files changed, 80 insertions, 37 deletions

diff --git a/less/modals.less b/less/modals.less
index 7a233091d..326d7111b 100644
--- a/less/modals.less
+++ b/less/modals.less
@@ -2,33 +2,44 @@
 // Modals
 // --------------------------------------------------
 
-// Background
-.modal-backdrop {
+// .modal-open      - body class for killing the scroll
+// .modal           - container to scroll within
+// .modal-dialog    - positioning shell for the actual modal
+// .modal-content   - actual modal w/ bg and corners and shit
+
+// Kill the scroll on the body
+.modal-open {
+  overflow: hidden;
+}
+
+// Container that the modal scrolls within
+.modal {
+  display: none;
+  overflow: auto;
+  overflow-y: scroll;
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: @zindex-modal-background;
-  background-color: #000;
-  // Fade for backdrop
-  &.fade { opacity: 0; }
+  -webkit-overflow-scrolling: touch;
 }
 
-.modal-backdrop,
-.modal-backdrop.fade.in {
-  .opacity(80);
+// Shell div to position the modal with bottom padding
+.modal-dialog {
+  position: relative;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: auto;
+  padding: 10px;
+  z-index: @zindex-modal-background + 10;
 }
 
-// Base modal
-.modal {
-  position: fixed;
-  top: 10%;
-  left: 50%;
-  z-index: @zindex-modal;
-  display: none;
-  width: 560px;
-  margin-left: -280px;
+// Actual modal
+.modal-content {
+  position: relative;
   background-color: #fff;
   border: 1px solid #999;
   border: 1px solid rgba(0,0,0,.3);
@@ -43,40 +54,58 @@
     top: -25%;
   }
   &.fade.in { top: 10%; }
+
 }
+
+// Modal background
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: @zindex-modal-background - 10;
+  background-color: #fff;
+  // Fade for backdrop
+  &.fade { opacity: 0; }
+}
+.modal-backdrop,
+.modal-backdrop.fade.in {
+  .opacity(75);
+}
+
+// Modal header
+// -------------------------
+// Top section of the modal w/ title and dismiss
 .modal-header {
   padding: 9px 15px;
-  border-bottom: 1px solid #eee;
-  // Close icon
-  .close { margin-top: 2px; }
-  // Heading
-  h3 {
-    margin: 0;
-    line-height: 30px;
-  }
+  border-bottom: 1px solid #e5e5e5;
+}
+// Close icon
+.modal-header .close {
+  margin-top: 2px;
+}
+
+// Title text within header
+.modal-title {
+  margin: 0;
+  line-height: 30px; // effectively set a min-height for the header
 }
 
-// Body (where all modal content resides)
+// Modal body
+// -------------------------
+// Where all modal content resides (sibling of .modal-header and .modal-footer)
 .modal-body {
   position: relative;
-  overflow-y: auto;
-  max-height: 400px;
   padding: 15px;
 }
-// Remove bottom margin if need be
-.modal-form {
-  margin-bottom: 0;
-}
 
 // Footer (for actions)
 .modal-footer {
+  margin-top: 15px;
   padding: 14px 15px 15px;
-  margin-bottom: 0;
   text-align: right; // right align buttons
-  background-color: #f5f5f5;
-  border-top: 1px solid #ddd;
-  border-radius: 0 0 6px 6px;
-  .box-shadow(inset 0 1px 0 #fff);
+  border-top: 1px solid #e5e5e5;
   .clearfix(); // clear it in case folks use .pull-* classes on buttons
 
   // Properly space out buttons
@@ -93,3 +122,17 @@
     margin-left: 0;
   }
 }
+
+
+@media screen and (min-width: 768px) {
+
+  .modal-dialog {
+    left: 50%;
+    right: auto;
+    width: 560px;
+    margin-left: -280px;
+    padding-top: 30px;
+    padding-bottom: 30px;
+  }
+
+}