From b04acb37e830e1b1a299fab5d543b6ac0c70a1b0 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Thu, 7 Feb 2013 19:31:12 -0800
Subject: [PATCH] finish modal tweaks
---
docs/assets/css/bootstrap.css | 35 ++++++++++--------------
docs/javascript.html | 3 +-
docs/templates/pages/javascript.mustache | 3 +-
less/modals.less | 34 ++++++++++-------------
less/variables.less | 6 ++++
5 files changed, 38 insertions(+), 43 deletions(-)
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 739bee5c73..66c192c03e 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 cc8e6961b2..ef2ba08907 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 d4991bca22..c731c310a9 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>
diff --git a/less/modals.less b/less/modals.less
index 7ca44b40be..9c0d0c7b03 100644
--- a/less/modals.less
+++ b/less/modals.less
@@ -24,10 +24,13 @@
left: 0;
z-index: @zindex-modal-background;
-webkit-overflow-scrolling: touch;
-}
-.modal.fade {
- top: -25%;
- .transition(~"opacity 0.3s linear, top 0.3s ease-out");
+
+ // When fading in the modal, animate it to slide down
+ &.fade {
+ top: -25%;
+ .transition(~"opacity 0.3s linear, top 0.3s ease-out");
+ }
+ &.fade.in { top: 0; }
}
// Shell div to position the modal with bottom padding
@@ -48,17 +51,10 @@
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.2);
border-radius: 6px;
- .box-shadow(0 3px 10px rgba(0,0,0,0.25));
+ .box-shadow(0 3px 9px rgba(0,0,0,.5));
.background-clip(padding-box);
// Remove focus outline from opened modal
outline: none;
-
- &.fade {
- .transition(e('opacity .3s linear, top .3s ease-out'));
- top: -25%;
- }
- &.fade.in { top: 10%; }
-
}
// Modal background
@@ -69,13 +65,10 @@
bottom: 0;
left: 0;
z-index: @zindex-modal-background - 10;
- background-color: #fff;
+ background-color: #000;
// Fade for backdrop
&.fade { opacity: 0; }
-}
-.modal-backdrop,
-.modal-backdrop.fade.in {
- .opacity(75);
+ &.fade.in { .opacity(50);}
}
// Modal header
@@ -99,13 +92,13 @@
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
position: relative;
- padding: 15px;
+ padding: @modal-inner-padding;
}
// Footer (for actions)
.modal-footer {
margin-top: 15px;
- padding: 14px 15px 15px;
+ padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding;
text-align: right; // right align buttons
border-top: 1px solid #e5e5e5;
.clearfix(); // clear it in case folks use .pull-* classes on buttons
@@ -136,5 +129,8 @@
padding-top: 30px;
padding-bottom: 30px;
}
+ .modal-content {
+ .box-shadow(0 5px 15px rgba(0,0,0,.5));
+ }
}
diff --git a/less/variables.less b/less/variables.less
index 4221f3f65c..627b1a86e0 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -271,6 +271,12 @@
@popover-arrow-outer-color: rgba(0,0,0,.25);
+// Modals
+// -------------------------
+
+@modal-inner-padding: 20px;
+
+
// Progress bars
// -------------------------
@progress-bg: #f5f5f5;
--
GitLab