finish modal tweaks

3 files changed, 17 insertions, 24 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 739bee5c7..66c192c03 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3745,6 +3745,10 @@ button.close {
           transition: opacity 0.3s linear, top 0.3s ease-out;
 }
 
+.modal.fade.in {
+  top: 0;
+}
+
 .modal-dialog {
   position: relative;
   top: 0;
@@ -3762,25 +3766,13 @@ button.close {
   border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 6px;
   outline: none;
-  -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
-          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
+  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
+          box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
   -webkit-background-clip: padding-box;
      -moz-background-clip: padding-box;
           background-clip: padding-box;
 }
 
-.modal-content.fade {
-  top: -25%;
-  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
-     -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
-       -o-transition: opacity 0.3s linear, top 0.3s ease-out;
-          transition: opacity 0.3s linear, top 0.3s ease-out;
-}
-
-.modal-content.fade.in {
-  top: 10%;
-}
-
 .modal-backdrop {
   position: fixed;
   top: 0;
@@ -3788,17 +3780,16 @@ button.close {
   bottom: 0;
   left: 0;
   z-index: 1030;
-  background-color: #fff;
+  background-color: #000;
 }
 
 .modal-backdrop.fade {
   opacity: 0;
 }
 
-.modal-backdrop,
 .modal-backdrop.fade.in {
-  opacity: 0.75;
-  filter: alpha(opacity=75);
+  opacity: 0.5;
+  filter: alpha(opacity=50);
 }
 
 .modal-header {
@@ -3817,11 +3808,11 @@ button.close {
 
 .modal-body {
   position: relative;
-  padding: 15px;
+  padding: 20px;
 }
 
 .modal-footer {
-  padding: 14px 15px 15px;
+  padding: 19px 20px 20px;
   margin-top: 15px;
   text-align: right;
   border-top: 1px solid #e5e5e5;
@@ -3859,6 +3850,10 @@ button.close {
     padding-bottom: 30px;
     margin-left: -280px;
   }
+  .modal-content {
+    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+  }
 }
 
 .tooltip {
diff --git a/docs/javascript.html b/docs/javascript.html
index cc8e6961b..ef2ba0890 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -242,7 +242,7 @@ $('#myModal').on('show', function (e) {
                 </div>
                 <div class="modal-body">
                   <h4>Text in a modal</h4>
-                  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
+                  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
 
                   <h4>Popover in a modal</h4>
                   <p>This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>
@@ -253,7 +253,6 @@ $('#myModal').on('show', function (e) {
                   <hr>
 
                   <h4>Overflowing text to show optional scrollbar</h4>
-                  <p>We set a fixed <code>max-height</code> on the <code>.modal-body</code>. Watch it overflow with all this extra lorem ipsum text we've included.</p>
                   <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                   <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                   <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index d4991bca2..c731c310a 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -175,7 +175,7 @@ $('#myModal').on('show', function (e) {
                 </div>
                 <div class="modal-body">
                   <h4>Text in a modal</h4>
-                  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
+                  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
 
                   <h4>Popover in a modal</h4>
                   <p>This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>
@@ -186,7 +186,6 @@ $('#myModal').on('show', function (e) {
                   <hr>
 
                   <h4>Overflowing text to show optional scrollbar</h4>
-                  <p>We set a fixed <code>max-height</code> on the <code>.modal-body</code>. Watch it overflow with all this extra lorem ipsum text we've included.</p>
                   <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                   <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                   <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>