mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-26 23:54:23 +01:00
finish modal tweaks
This commit is contained in:
Mark Otto
parent
a623b8c10f
commit
b04acb37e8
35
docs/assets/css/bootstrap.css
vendored
35
docs/assets/css/bootstrap.css
vendored
@ -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 {
|
||||
|
||||
@ -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>
|
||||
|
||||
3
docs/templates/pages/javascript.mustache
vendored
3
docs/templates/pages/javascript.mustache
vendored
@ -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>
|
||||
|
||||
@ -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));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -271,6 +271,12 @@
|
||||
@popover-arrow-outer-color: rgba(0,0,0,.25);
|
||||
|
||||
|
||||
// Modals
|
||||
// -------------------------
|
||||
|
||||
@modal-inner-padding: 20px;
|
||||
|
||||
|
||||
// Progress bars
|
||||
// -------------------------
|
||||
@progress-bg: #f5f5f5;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user