use variablef or wells background-color, update docs for glyphicons license mention, update popovers to remove that thick border and make them look mo betta

4 files changed, 84 insertions, 35 deletions

diff --git a/less/mixins.less b/less/mixins.less
index e1e06bd2a6..fd162a0491 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -509,37 +509,69 @@
 // -------------------------
 // For tipsies and popovers
 #popoverArrow {
-  .top(@arrowWidth: 5px, @color: @black) {
-    bottom: 0;
+  .top(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
+    bottom: -@arrowWidth;
     left: 50%;
     margin-left: -@arrowWidth;
     border-left: @arrowWidth solid transparent;
     border-right: @arrowWidth solid transparent;
+    border-top: @arrowWidth solid #ccc;
     border-top: @arrowWidth solid @color;
+    &:after {
+      border-left: @arrowWidth - 1 solid transparent;
+      border-right: @arrowWidth - 1 solid transparent;
+      border-top: @arrowWidth - 1 solid #fff;
+      bottom: 1px;
+      left: -@arrowWidth + 1;
+    }
   }
-  .left(@arrowWidth: 5px, @color: @black) {
+  .right(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
     top: 50%;
-    right: 0;
+    left: -@arrowWidth;
     margin-top: -@arrowWidth;
     border-top: @arrowWidth solid transparent;
     border-bottom: @arrowWidth solid transparent;
-    border-left: @arrowWidth solid @color;
+    border-right: @arrowWidth solid #ccc;
+    border-right: @arrowWidth solid @color;
+    &:after {
+      border-top: @arrowWidth - 1 solid transparent;
+      border-bottom: @arrowWidth - 1 solid transparent;
+      border-right: @arrowWidth - 1 solid #fff;
+      bottom: -@arrowWidth + 1;
+      left: 1px;
+    }
   }
-  .bottom(@arrowWidth: 5px, @color: @black) {
-    top: 0;
+  .bottom(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
+    top: -@arrowWidth;
     left: 50%;
     margin-left: -@arrowWidth;
     border-left: @arrowWidth solid transparent;
     border-right: @arrowWidth solid transparent;
+    border-bottom: @arrowWidth solid #ccc;
     border-bottom: @arrowWidth solid @color;
+    &:after {
+      border-left: @arrowWidth - 1 solid transparent;
+      border-right: @arrowWidth - 1 solid transparent;
+      border-bottom: @arrowWidth - 1 solid #f5f5f5;
+      top: 1px;
+      left: -@arrowWidth + 1;
+    }
   }
-  .right(@arrowWidth: 5px, @color: @black) {
+  .left(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
     top: 50%;
-    left: 0;
+    right: -@arrowWidth;
     margin-top: -@arrowWidth;
     border-top: @arrowWidth solid transparent;
     border-bottom: @arrowWidth solid transparent;
-    border-right: @arrowWidth solid @color;
+    border-left: @arrowWidth solid #ccc;
+    border-left: @arrowWidth solid @color;
+    &:after {
+      border-top: @arrowWidth - 1 solid transparent;
+      border-bottom: @arrowWidth - 1 solid transparent;
+      border-left: @arrowWidth - 1 solid #fff;
+      bottom: -@arrowWidth + 1;
+      right: 1px;
+    }
   }
 }
 
diff --git a/less/popovers.less b/less/popovers.less
index 558d99ec99..ca69ca8018 100644
--- a/less/popovers.less
+++ b/less/popovers.less
@@ -7,42 +7,55 @@
   left: 0;
   z-index: @zindexPopover;
   display: none;
-  padding: 5px;
-  &.top    { margin-top:  -5px; }
-  &.right  { margin-left:  5px; }
-  &.bottom { margin-top:   5px; }
-  &.left   { margin-left: -5px; }
+  width: 218px;
+  background-color: #fff;
+  -webkit-background-clip: padding-box;
+     -moz-background-clip: padding;
+          background-clip: padding-box;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0,0,0,.2);
+  .border-radius(6px);
+  .box-shadow(0 5px 10px rgba(0,0,0,.2));
+
+  // Offset the popover to account for the popover arrow
+  &.top     { margin-bottom: 10px; }
+  &.right   { margin-left: 10px; }
+  &.bottom  { margin-top: 10px; }
+  &.left    { margin-right: 10px; }
+
+  // Call the mixin for the arrows
   &.top .arrow    { #popoverArrow > .top(); }
   &.right .arrow  { #popoverArrow > .right(); }
   &.bottom .arrow { #popoverArrow > .bottom(); }
   &.left .arrow   { #popoverArrow > .left();  }
+
+  // Common arrow styles
   .arrow {
     position: absolute;
     width: 0;
     height: 0;
+    &:after {
+      position: absolute;
+      display: inline-block;
+      width: 0;
+      height: 0;
+      content: "";
+    }
   }
 }
-.popover-inner {
-  padding: 3px;
-  width: 280px;
-  overflow: hidden;
-  background: @black; // has to be full background declaration for IE fallback
-  background: rgba(0,0,0,.8);
-  .border-radius(6px);
-  .box-shadow(0 3px 7px rgba(0,0,0,0.3));
-}
+
 .popover-title {
-  padding: 9px 15px;
-  line-height: 1;
+  padding: 8px 14px;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 18px;
   background-color: #f5f5f5;
-  border-bottom:1px solid #eee;
-  .border-radius(3px 3px 0 0);
+  border-bottom: 1px solid #e5e5e5;
+  .border-radius(5px 5px 0 0);
 }
+
 .popover-content {
-  padding: 14px;
-  background-color: @white;
-  .border-radius(0 0 3px 3px);
-  .background-clip(padding-box);
+  padding: 9px 14px;
   p, ul, ol {
     margin-bottom: 0;
   }
diff --git a/less/variables.less b/less/variables.less
index 25a032781d..bd3a2905d0 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -148,6 +148,11 @@
 @hrBorder:                @grayLighter;
 
 
+// Wells
+// -------------------------
+@wellBackground:                  #f5f5f5;
+
+
 // Navbar
 // -------------------------
 @navbarHeight:                    40px;
diff --git a/less/wells.less b/less/wells.less
index 9300061a50..bac3715a7d 100644
--- a/less/wells.less
+++ b/less/wells.less
@@ -5,9 +5,8 @@
   min-height: 20px;
   padding: 19px;
   margin-bottom: 20px;
-  background-color: #f5f5f5;
-  border: 1px solid #eee;
-  border: 1px solid rgba(0,0,0,.05);
+  background-color: @wellBackground;
+  border: 1px solid darken(@wellBackground, 7%);
   .border-radius(4px);
   .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
   blockquote {