-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
+ -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
+ -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
+}
+div.modal .modal-header {
+ border-bottom: 1px solid #eee;
+ padding: 5px 20px;
+}
+div.modal .modal-header h2 {
+ font-size: 20px;
+ font-weight: 200;
+}
+div.modal .modal-header a.close {
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ color: #999;
+ line-height: 10px;
+ font-size: 18px;
}
div.pagination ul li.next a,div.pagination ul li:last-child a{border:0;}
div.well{background:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);}
div.modal-backdrop{background-color:rgba(0, 0, 0, 0.5);position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;}
-div.modal{position:fixed;top:50%;left:50%;z-index:2000;width:620px;height:500px;margin:-310px 0 0 -250px;background-color:#ffffff;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
+div.modal{position:fixed;top:50%;left:50%;z-index:2000;width:620px;height:500px;margin:-310px 0 0 -250px;background-color:#ffffff;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 2px 6px rgba(0, 0, 0, 0.35);-moz-box-shadow:0 2px 6px rgba(0, 0, 0, 0.35);box-shadow:0 2px 6px rgba(0, 0, 0, 0.35);}div.modal .modal-header{border-bottom:1px solid #eee;padding:5px 20px;}div.modal .modal-header h2{font-size:20px;font-weight:200;}
+div.modal .modal-header a.close{position:absolute;right:10px;top:10px;color:#999;line-height:10px;font-size:18px;}
<li><a href="#forms">Forms</a></li>
<li><a href="#navigation">Navigation</a></li>
<li><a href="#alerts">Alerts</a></li>
+ <li><a href="#modals">Modals</a></li>
</ul>
</div>
</div>
</section>
+<section id="modals">
+ <div class="page-header">
+ <h1>Modals <small>Rules and conditions for displaying content in popovers.</small></h1>
+ </div>
+ <div class="row">
+ <div class="span4 columns">
+ <h2>Tweet Modal</h2>
+ <p>This is text about a modal that i am making. mark will say change this text. we will change it. It will be changed O_O</p>
+ </div>
+ <div class="span12 columns">
+ <div class="modal-backdrop" style="position:relative; min-height:200px; padding:40px; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; z-index: 1">
+ <div class="modal" style="position:relative; top: auto; left: auto; margin: 0 auto; width:565px; height: 265px; z-index: 1">
+ <div class="modal-header">
+ <h2>Add new Tweet</h2>
+ <a href="#" class="close">×</a>
+ </div>
+ <div class="modal-body">
+ </div>
+ <div class="modal-footer">
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</section>
</div> <!-- /container -->
height: 500px;
margin: -310px 0 0 -250px;
background-color: @white;
+ .modal-header {
+ border-bottom:1px solid #eee;
+ padding: 5px 20px;
+ h2 {
+ font-size: 20px;
+ font-weight: 200;
+ }
+ a.close {
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ color: #999;
+ line-height:10px;
+ font-size: 18px;
+ }
+ }
.border-radius(6px);
-}
+ .box-shadow(0 2px 6px rgba(0, 0, 0, 0.35))
+}
\ No newline at end of file