started workign on modals

bootstrap-1.0.0.css

@@ -1667,4 +1667,23 @@ div.modal {
   -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;
 }

bootstrap-1.0.0.min.css

@@ -194,4 +194,5 @@ div.pagination ul li.disabled a,div.pagination ul li.disabled a:hover{background
 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;}

docs/index.html

@@ -35,6 +35,7 @@
           <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>
@@ -1177,6 +1178,31 @@
 </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">&times;</a>
+          </div>
+          <div class="modal-body">
+          </div>
+          <div class="modal-footer">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
 
 
     </div> <!-- /container -->

lib/patterns.less

@@ -491,5 +491,22 @@ div.modal {
   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