change popover stufff

diff --git a/Makefile b/Makefile
index 74ab90d023226c3736cd3ba2b2f168ede30b1b66..f275d7ce96affdbe6765e2be03a06ff6a93027ef 100644 (file)
--- a/Makefile
+++ b/Makefile
@@ -18,11 +18,11 @@ build:
        fi
 
 watch:
-       @@if test ! -z ${LESS_COMPESSOR}; then \
+       @@if test ! -z ${WATCHR}; then \
          echo "Watching less files..."; \
          watchr -e "watch('lib/.*\.less') { system 'make' }"; \
        else \
-               echo "You must have the WATCHR installed in order to build Bootstrap."; \
+               echo "You must have the watchr installed in order to watch Bootstrap less files."; \
                echo "You can install it by running: gem install watchr"; \
        fi
 

diff --git a/bootstrap-1.0.0.css b/bootstrap-1.0.0.css
index 2f592d3579dddb33163eda4fd3dbe6707714dc45..126e8a184475ff35053ed5087b947e1f3a1dc7ad 100644 (file)
--- a/bootstrap-1.0.0.css
+++ b/bootstrap-1.0.0.css
@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Sat Jul  2 15:34:02 PDT 2011
+ * Date: Thu Jul 28 17:49:29 PDT 2011
  */
 /*
  * Reset.less
@@ -1703,57 +1703,15 @@ div.twipsy .twipsy-arrow {
   width: 0;
   height: 0;
 }
-.popover-wrapper {
-  position: relative;
-}
 .popover {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1000;
-  display: none;
-}
-.popover-border {
-  background: rgba(0, 0, 0, 0.8);
   padding: 5px;
-  overflow: hidden;
-  -webkit-border-radius: 6px;
-  -moz-border-radius: 6px;
-  border-radius: 6px;
-  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
-  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
-}
-.popover-title {
-  padding: 5px 15px 10px;
-  color: #fff;
-  line-height: 1;
-}
-.popover-inner {
-  background-color: #fff;
-  overflow: hidden;
-  padding: 15px;
-  width: 200px;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-}
-.popover-inner p, .popover-inner ul, .popover-inner ol {
-  margin-bottom: 0;
-}
-.popover2 {
-  padding: 5px;
-}
-.popover2 .inner {
-  -webkit-border-radius: 6px;
-  -moz-border-radius: 6px;
-  border-radius: 6px;
-  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-  -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-  width: 280px;
+  display: none;
 }
-.popover2.above .arrow {
+.popover.above .arrow {
   bottom: 0;
   left: 50%;
   margin-left: -5px;
@@ -1761,7 +1719,7 @@ div.twipsy .twipsy-arrow {
   border-right: 5px solid transparent;
   border-top: 5px solid #000000;
 }
-.popover2.right .arrow {
+.popover.right .arrow {
   top: 50%;
   left: 0;
   margin-top: -5px;
@@ -1769,7 +1727,7 @@ div.twipsy .twipsy-arrow {
   border-bottom: 5px solid transparent;
   border-right: 5px solid #000000;
 }
-.popover2.below .arrow {
+.popover.below .arrow {
   top: 0;
   left: 50%;
   margin-left: -5px;
@@ -1777,7 +1735,7 @@ div.twipsy .twipsy-arrow {
   border-right: 5px solid transparent;
   border-bottom: 5px solid #000000;
 }
-.popover2.left .arrow {
+.popover.left .arrow {
   top: 50%;
   right: 0;
   margin-top: -5px;
@@ -1785,82 +1743,42 @@ div.twipsy .twipsy-arrow {
   border-bottom: 5px solid transparent;
   border-left: 5px solid #000000;
 }
-.popover2 .arrow {
+.popover .arrow {
   position: absolute;
   width: 0;
   height: 0;
 }
-.popover2 .title {
-  background-color: #222222;
-  background-repeat: repeat-x;
-  background-image: -khtml-gradient(linear, left top, left bottom, from(#444444), to(#222222));
-  background-image: -moz-linear-gradient(#444444, #222222);
-  background-image: -ms-linear-gradient(#444444, #222222);
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444444), color-stop(100%, #222222));
-  background-image: -webkit-linear-gradient(#444444, #222222);
-  background-image: -o-linear-gradient(#444444, #222222);
-  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#222222', GradientType=0)";
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#222222', GradientType=0);
-  background-image: linear-gradient(#444444, #222222);
+.popover .inner {
+  background: rgba(0, 0, 0, 0.8);
+  padding: 3px;
+  overflow: hidden;
+  width: 280px;
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+}
+.popover .title {
+  background: #f5f5f5;
   padding: 9px 15px;
-  color: #fff;
   line-height: 1;
-  -webkit-border-radius: 6px 6px 0 0;
-  -moz-border-radius: 6px 6px 0 0;
-  border-radius: 6px 6px 0 0;
+  -webkit-border-radius: 3px 3px 0 0;
+  -moz-border-radius: 3px 3px 0 0;
+  border-radius: 3px 3px 0 0;
+  border-bottom: 1px solid #eee;
 }
-.popover2 .content {
+.popover .content {
   background-color: #ffffff;
   padding: 14px;
-  border: 1px solid #000000;
-  border-top: 0;
-  -webkit-border-radius: 0 0 6px 6px;
-  -moz-border-radius: 0 0 6px 6px;
-  border-radius: 0 0 6px 6px;
+  -webkit-border-radius: 0 0 3px 3px;
+  -moz-border-radius: 0 0 3px 3px;
+  border-radius: 0 0 3px 3px;
   -webkit-background-clip: padding;
   -moz-background-clip: padding;
   background-clip: padding;
 }
-.popover2 .content p, .popover2 .content ul, .popover2 .content ol {
+.popover .content p, .popover .content ul, .popover .content ol {
   margin-bottom: 0;
 }
-.popover-menu {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: none;
-  z-index: 1000;
-  background: none;
-}
-.popover-menu .popover-arrow {
-  width: 100%;
-  height: 14px;
-  background: url(/blueprint/images/popover-menu-bottom.png) no-repeat bottom center;
-}
-.popover-menu .popover-border {
-  margin: 0 0 -3px;
-  padding: 2px;
-  background: rgba(255, 255, 255, 0.75);
-  border: 1px solid rgba(0, 0, 0, 0.5);
-  -webkit-border-radius: 6px;
-  -moz-border-radius: 6px;
-  border-radius: 6px;
-  overflow: hidden;
-  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
-  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
-  -webkit-background-clip: padding;
-}
-.popover-menu .popover-inner {
-  background: #222;
-  padding: 7px;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  width: 150px;
-}
-.popover-menu a {
-  color: #fff;
-  font-weight: bold;
-  padding: 5px 8px;
-}

diff --git a/bootstrap-1.0.0.min.css b/bootstrap-1.0.0.min.css
index 1bedb844ba74e4ea461363bd71c2a37f3e00ffb6..bfe372ca6be2b9218043d0b0f1d172285ccf6549 100644 (file)
--- a/bootstrap-1.0.0.min.css
+++ b/bootstrap-1.0.0.min.css
@@ -205,21 +205,11 @@ div.twipsy.below .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px s
 div.twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;}
 div.twipsy .twipsy-inner{padding:3px 8px;background-color:#000;color:white;text-align:center;max-width:200px;text-decoration:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
 div.twipsy .twipsy-arrow{position:absolute;width:0;height:0;}
-.popover-wrapper{position:relative;}
-.popover{position:absolute;top:0;left:0;z-index:1000;display:none;}
-.popover-border{background:rgba(0, 0, 0, 0.8);padding:5px;overflow:hidden;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);-moz-box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);}
-.popover-title{padding:5px 15px 10px;color:#fff;line-height:1;}
-.popover-inner{background-color:#fff;overflow:hidden;padding:15px;width:200px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.popover-inner p,.popover-inner ul,.popover-inner ol{margin-bottom:0;}
-.popover2{padding:5px;}.popover2 .inner{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);width:280px;}
-.popover2.above .arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
-.popover2.right .arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;}
-.popover2.below .arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;}
-.popover2.left .arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;}
-.popover2 .arrow{position:absolute;width:0;height:0;}
-.popover2 .title{background-color:#222222;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#444444), to(#222222));background-image:-moz-linear-gradient(#444444, #222222);background-image:-ms-linear-gradient(#444444, #222222);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #444444), color-stop(100%, #222222));background-image:-webkit-linear-gradient(#444444, #222222);background-image:-o-linear-gradient(#444444, #222222);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#222222', GradientType=0)";filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#222222', GradientType=0);background-image:linear-gradient(#444444, #222222);padding:9px 15px;color:#fff;line-height:1;-webkit-border-radius:6px 6px 0 0;-moz-border-radius:6px 6px 0 0;border-radius:6px 6px 0 0;}
-.popover2 .content{background-color:#ffffff;padding:14px;border:1px solid #000000;border-top:0;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-background-clip:padding;-moz-background-clip:padding;background-clip:padding;}.popover2 .content p,.popover2 .content ul,.popover2 .content ol{margin-bottom:0;}
-.popover-menu{position:absolute;top:0;left:0;display:none;z-index:1000;background:none;}
-.popover-menu .popover-arrow{width:100%;height:14px;background:url(/blueprint/images/popover-menu-bottom.png) no-repeat bottom center;}
-.popover-menu .popover-border{margin:0 0 -3px;padding:2px;background:rgba(255, 255, 255, 0.75);border:1px solid rgba(0, 0, 0, 0.5);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;overflow:hidden;-webkit-box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);-moz-box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);-webkit-background-clip:padding;}
-.popover-menu .popover-inner{background:#222;padding:7px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;width:150px;}
-.popover-menu a{color:#fff;font-weight:bold;padding:5px 8px;}
+.popover{position:absolute;top:0;left:0;z-index:1000;padding:5px;display:none;}.popover.above .arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
+.popover.right .arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;}
+.popover.below .arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;}
+.popover.left .arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;}
+.popover .arrow{position:absolute;width:0;height:0;}
+.popover .inner{background:rgba(0, 0, 0, 0.8);padding:3px;overflow:hidden;width:280px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);}
+.popover .title{background:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;border-bottom:1px solid #eee;}
+.popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding;-moz-background-clip:padding;background-clip:padding;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;}

diff --git a/docs/.DS_Store b/docs/.DS_Store
new file mode 100644 (file)
index 0000000..f199fc7
Binary files /dev/null and b/docs/.DS_Store differ

diff --git a/docs/assets/.DS_Store b/docs/assets/.DS_Store
new file mode 100644 (file)
index 0000000..57b2f45
Binary files /dev/null and b/docs/assets/.DS_Store differ

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 93c4f5b32acb412c9bc6985102387103566e1d63..13868fdd91986da225999d36c58920827e253a1a 100644 (file)
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -231,14 +231,24 @@ div.topbar-wrapper div.topbar {
 div.popover-well {
   min-height: 160px;
 }
+
 div.popover-well div.popover {
   display: block;
 }
+
 div.popover-well div.popover-wrapper {
   width: 50%;
   height: 160px;
   float: left;
+  margin-left: 55px;
+  position:relative;
 }
+
 div.popover-well div.popover-menu-wrapper {
   height: 80px;
+}
+
+img.large-bird {
+  margin: 5px 0 0 310px;
+  opacity:.1;
 }
\ No newline at end of file

diff --git a/docs/assets/img/bird.png b/docs/assets/img/bird.png
new file mode 100644 (file)
index 0000000..f0e6fcb
Binary files /dev/null and b/docs/assets/img/bird.png differ

diff --git a/docs/index.html b/docs/index.html
index 41be6b5ece4b88e850ad5fb08b8030304b7938ff..358642e2be549605fa5cacbf53b643793b4a6b07 100644 (file)
--- a/docs/index.html
+++ b/docs/index.html
@@ -1114,55 +1114,30 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
       </div>
     </div>
   </div> <!-- /row -->
-    
+
   <div class="row">
     <div class="span4 columns">
       <h2>Popovers</h2>
+      <p>Use popovers to provide subtextual information to a page without effecting layout.</p>
     </div>
     <div class="span12 columns">
       <div class="well popover-well">
-      
-        <div class="popover-wrapper">
-          <div class="popover above">
-            <div class="popover-border">
-              <h3 class="popover-title">Popover title</h3>
-              <div class="popover-inner">
-                <p>Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      
-        <div class="popover-wrapper">
-          <div class="popover bottom popover2">
+         <div class="popover-wrapper">
+          <div class="popover left">
             <div class="arrow"></div>
             <div class="inner">
-              <h3 class="title">Popover title</h3>
+              <h3 class="title">Popover Title</h3>
               <div class="content">
                 <p>Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
               </div>
             </div>
           </div>
-        </div>
-        
-      </div>
-      <div class="well popover-well popover-menu-well">
-        <div class="popover-wrapper">
-          <div class="popover popover-menu">
-            <div class="popover-border">
-              <div class="popover-inner">
-                <a href="">View</a>
-                <a href="">Edit</a>
-                <a href="">Delete</a>
-              </div>
-            </div>
-            <div class="popover-arrow"></div>
-          </div>
+          <img class="large-bird" src="assets/img/bird.png">
         </div>
       </div>
     </div>
   </div> <!-- /row -->
-    
+
 
 </section>
 

diff --git a/lib/patterns.less b/lib/patterns.less
index b79438dea3bae2e65fd6e74afa461017e4f82df3..8e216555866a49689d43e3a78b1472dc2243440e 100644 (file)
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -583,108 +583,44 @@ div.twipsy {
 // Popovers
 // --------
 
-.popover-wrapper {
-  position: relative;
-}
 .popover {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1000;
-  display: none;
-}
-.popover-border {
-  background: rgba(0,0,0,.8);
   padding: 5px;
-  overflow: hidden;
-  .border-radius(6px);
-  .box-shadow(0 3px 6px rgba(0,0,0,.25));
-}
-.popover-title {
-  padding: 5px 15px 10px;
-  color: #fff;
-  line-height: 1;
-}
-.popover-inner {
-  background-color: #fff;
-  overflow: hidden;
-  padding: 15px;
-  width: 200px;
-  .border-radius(3px);
-  p, ul, ol {
-    margin-bottom: 0;
-  }
-}
-
-.popover2 {
-  padding: 5px;
-  .inner {
-    .border-radius(6px);
-    .box-shadow(0 3px 7px rgba(0,0,0,0.3));
-    width: 280px;
-  }
-  &.above .arrow   { #popoverArrow > .above(); }
-  &.right .arrow   { #popoverArrow > .right(); }
-  &.below .arrow   { #popoverArrow > .below(); }
-  &.left .arrow   { #popoverArrow > .left(); }
+  display: none;
+  &.above .arrow { #popoverArrow > .above(); }
+  &.right .arrow { #popoverArrow > .right(); }
+  &.below .arrow { #popoverArrow > .below(); }
+  &.left .arrow  { #popoverArrow > .left(); }
   .arrow {
     position: absolute;
     width: 0;
     height: 0;
   }
+  .inner {
+    background: rgba(0,0,0,.8);
+    padding: 3px;
+    overflow: hidden;
+    width: 280px;
+    .border-radius(6px);
+    .box-shadow(0 3px 7px rgba(0,0,0,0.3));
+  }
   .title {
-    #gradient > .vertical(#444, #222);
+    background: #f5f5f5;
     padding: 9px 15px;
-    color: #fff;
     line-height: 1;
-    .border-radius(6px 6px 0 0);
+    .border-radius(3px 3px 0 0);
+    border-bottom:1px solid #eee;
   }
   .content {
     background-color: @white;
     padding: 14px;
-    border: 1px solid rgba(0,0,0,1);
-    border-top: 0;
-    .border-radius(0 0 6px 6px);
+    .border-radius(0 0 3px 3px);
     .background-clip(padding);
     p, ul, ol {
       margin-bottom: 0;
     }
   }
-}
-
-// Alt popover for menus
-.popover-menu {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: none;
-  z-index: 1000;
-  background: none;
-}
-.popover-menu .popover-arrow {
-  width: 100%;
-  height: 14px;
-  background: url(/blueprint/images/popover-menu-bottom.png) no-repeat bottom center;
-}
-.popover-menu .popover-border {
-  margin: 0 0 -3px;
-  padding: 2px;
-  background: rgba(255,255,255,.75);
-  border: 1px solid rgba(0,0,0,.5);
-  .border-radius(6px);
-  overflow: hidden;
-  .box-shadow(0 3px 6px rgba(0,0,0,.25));
-  -webkit-background-clip: padding;
-}
-.popover-menu .popover-inner {
-  background: #222;
-  padding: 7px;
-  .border-radius(4px);
-  width: 150px;
-}
-
-.popover-menu a {
-  color: #fff;
-  font-weight: bold;
-  padding: 5px 8px;
-}
+}
\ No newline at end of file