1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00

modal refinements in docs and general responsiveness

This commit is contained in:
Mark Otto 2012-01-28 00:39:22 -08:00
parent 18d95a163b
commit 967030cb53
5 changed files with 19 additions and 8 deletions

View file

@ -24,9 +24,9 @@
}
.modal {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
top: 10px;
left: 10px;
right: 10px;
width: auto;
margin: 0;
}
@ -35,6 +35,7 @@
}
.modal-header .close {
padding: 10px;
margin: -10px;
}
}
@media (max-width: 768px) {

View file

@ -723,6 +723,15 @@ form.well {
word-wrap: break-word;
word-break: break-all;
}
/* Modal example */
.modal-example .modal {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
}
}

View file

@ -193,7 +193,7 @@
<div class="span9 columns">
<h2>Static example</h2>
<p>Below is a statically rendered modal.</p>
<div class="well" style="background-color: #888; border: none;">
<div class="well modal-example" style="background-color: #888; border: none;">
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">&times;</a>

View file

@ -128,7 +128,7 @@
<div class="span9 columns">
<h2>{{_i}}Static example{{/i}}</h2>
<p>{{_i}}Below is a statically rendered modal.{{/i}}</p>
<div class="well" style="background-color: #888; border: none;">
<div class="well modal-example" style="background-color: #888; border: none;">
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">&times;</a>

View file

@ -56,15 +56,16 @@
// Modals
.modal {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
top: 10px;
left: 10px;
right: 10px;
width: auto;
margin: 0;
&.fade.in { top: auto; }
}
.modal-header .close {
padding: 10px;
margin: -10px;
}
}