_modals.scss in bootstrap-sass-rails-3.0.0.0.rc1

- old
+ new
@@ -1,97 +1,136 @@
-/* Partial: twitter/bootstrap/_modals.scss */
 //
 // Modals
 // --------------------------------------------------
 
+// .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
 
-// Background
-.modal-backdrop {
+// 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: $zindexModalBackdrop;
-  background-color: $black;
-  // Fade for backdrop
-  &.fade { opacity: 0; }
+  z-index: $zindex-modal-background;
+
+  // When fading in the modal, animate it to slide down
+  &.fade .modal-dialog {
+    @include translate(0, -25%);
+    @include transition-transform(0.3s ease-out);
+  }
+  &.fade.in  .modal-dialog { @include translate(0, 0); }
 }
 
-.modal-backdrop,
-.modal-backdrop.fade.in {
-  @include 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: $zindexModal;
-  width: 560px;
-  margin-left: -280px;
-  background-color: $white;
-  border: 1px solid #999;
-  border: 1px solid rgba(0,0,0,.3);
-  *border: 1px solid #999; /* IE6-7 */
-  @include border-radius(6px);
-  @include box-shadow(0 3px 7px rgba(0,0,0,0.3));
+// Actual modal
+.modal-content {
+  position: relative;
+  background-color: $modal-content-bg;
+  border: 1px solid $modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
+  border: 1px solid $modal-content-border-color;
+  border-radius: $border-radius-large;
+  @include box-shadow(0 3px 9px rgba(0,0,0,.5));
   @include background-clip(padding-box);
   // Remove focus outline from opened modal
   outline: none;
+}
 
-  &.fade {
-    @include transition(opacity .3s linear, top .3s ease-out);
-    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: $modal-backdrop-bg;
+  // Fade for backdrop
+  &.fade { @include opacity(0); }
+  &.fade.in { @include opacity(.5); }
 }
+
+// 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;
-  }
+  padding: $modal-title-padding;
+  border-bottom: 1px solid $modal-header-border-color;
+  min-height: ($modal-title-padding + $modal-title-line-height);
 }
+// Close icon
+.modal-header .close {
+  margin-top: -2px;
+}
 
-// Body (where all modal content resides)
+// Title text within header
+.modal-title {
+  margin: 0;
+  line-height: $modal-title-line-height;
+}
+
+// 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;
+  padding: $modal-inner-padding;
 }
-// Remove bottom margin if need be
-.modal-form {
-  margin-bottom: 0;
-}
 
 // Footer (for actions)
 .modal-footer {
-  padding: 14px 15px 15px;
-  margin-bottom: 0;
-  text-align: right;
-  background-color: #f5f5f5;
-  border-top: 1px solid #ddd;
-  @include border-radius(0 0 6px 6px);
-  @include box-shadow(inset 0 1px 0 $white);
+  margin-top: 15px;
+  padding: ($modal-inner-padding - 1) $modal-inner-padding $modal-inner-padding;
+  text-align: right; // right align buttons
+  border-top: 1px solid $modal-footer-border-color;
   @include clearfix(); // clear it in case folks use .pull-* classes on buttons
 
   // Properly space out buttons
   .btn + .btn {
     margin-left: 5px;
     margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
   }
-  // but override tht for button groups
+  // but override that for button groups
   .btn-group .btn + .btn {
     margin-left: -1px;
   }
   // and override it for block buttons as well
   .btn-block + .btn-block {
     margin-left: 0;
   }
+}
+
+// Scale up the modal
+@media screen and (min-width: $screen-tablet) {
+
+  .modal-dialog {
+    left: 50%;
+    right: auto;
+    width: 560px;
+    margin-left: -280px;
+    padding-top: 30px;
+    padding-bottom: 30px;
+  }
+  .modal-content {
+    @include box-shadow(0 5px 15px rgba(0,0,0,.5));
+  }
+
 }