Merge pull request #116 from twbs/fat-es6Alert

es6 - wip

2 files changed, 139 insertions, 109 deletions

diff --git a/scss/_popover.scss b/scss/_popover.scss
index 7757fc179..99b2ac563 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -8,7 +8,7 @@
   top: 0;
   left: 0;
   z-index: $zindex-popover;
-  display: none;
+  display: block;
   max-width: $popover-max-width;
   padding: 1px;
   // Reset font and text properties given new insertion method
@@ -24,14 +24,94 @@
   border: 1px solid $popover-border-color;
   @include border-radius($border-radius-lg);
   @include box-shadow(0 5px 10px rgba(0,0,0,.2));
+
+
+  // Popover directions
+
+  &.popover-top,
+  &.bs-tether-element-attached-bottom  {
+    margin-top: -$popover-arrow-width;
+
+    .popover-arrow {
+      bottom: -$popover-arrow-outer-width;
+      left: 50%;
+      margin-left: -$popover-arrow-outer-width;
+      border-top-color: $popover-arrow-outer-color;
+      border-bottom-width: 0;
+      &:after {
+        bottom: 1px;
+        margin-left: -$popover-arrow-width;
+        content: "";
+        border-top-color: $popover-arrow-color;
+        border-bottom-width: 0;
+      }
+    }
+  }
+
+  &.popover-right,
+  &.bs-tether-element-attached-left {
+    margin-left: $popover-arrow-width;
+
+    .popover-arrow {
+      top: 50%;
+      left: -$popover-arrow-outer-width;
+      margin-top: -$popover-arrow-outer-width;
+      border-right-color: $popover-arrow-outer-color;
+      border-left-width: 0;
+      &:after {
+        bottom: -$popover-arrow-width;
+        left: 1px;
+        content: "";
+        border-right-color: $popover-arrow-color;
+        border-left-width: 0;
+      }
+    }
+  }
+
+  &.popover-bottom,
+  &.bs-tether-element-attached-top {
+    margin-top: $popover-arrow-width;
+
+    .popover-arrow {
+      top: -$popover-arrow-outer-width;
+      left: 50%;
+      margin-left: -$popover-arrow-outer-width;
+      border-top-width: 0;
+      border-bottom-color: $popover-arrow-outer-color;
+      &:after {
+        top: 1px;
+        margin-left: -$popover-arrow-width;
+        content: "";
+        border-top-width: 0;
+        border-bottom-color: $popover-arrow-color;
+      }
+    }
+  }
+
+  &.popover-left,
+  &.bs-tether-element-attached-right {
+   margin-left: -$popover-arrow-width;
+
+   .popover-arrow {
+      top: 50%;
+      right: -$popover-arrow-outer-width;
+      margin-top: -$popover-arrow-outer-width;
+      border-right-width: 0;
+      border-left-color: $popover-arrow-outer-color;
+      &:after {
+        right: 1px;
+        bottom: -$popover-arrow-width;
+        content: "";
+        border-right-width: 0;
+        border-left-color: $popover-arrow-color;
+      }
+    }
+ }
+
 }
 
-// Offset the popover to account for the popover arrow
-.popover-top     { margin-top: -$popover-arrow-width; }
-.popover-right   { margin-left: $popover-arrow-width; }
-.popover-bottom  { margin-top: $popover-arrow-width; }
-.popover-left    { margin-left: -$popover-arrow-width; }
 
+// Offset the popover to account for the popover arrow
 .popover-title {
   padding: 8px 14px;
   margin: 0; // reset heading margin
@@ -68,61 +148,3 @@
   content: "";
   border-width: $popover-arrow-width;
 }
-
-.popover-top > .popover-arrow {
-  bottom: -$popover-arrow-outer-width;
-  left: 50%;
-  margin-left: -$popover-arrow-outer-width;
-  border-top-color: $popover-arrow-outer-color;
-  border-bottom-width: 0;
-  &:after {
-    bottom: 1px;
-    margin-left: -$popover-arrow-width;
-    content: "";
-    border-top-color: $popover-arrow-color;
-    border-bottom-width: 0;
-  }
-}
-.popover-right > .popover-arrow {
-  top: 50%;
-  left: -$popover-arrow-outer-width;
-  margin-top: -$popover-arrow-outer-width;
-  border-right-color: $popover-arrow-outer-color;
-  border-left-width: 0;
-  &:after {
-    bottom: -$popover-arrow-width;
-    left: 1px;
-    content: "";
-    border-right-color: $popover-arrow-color;
-    border-left-width: 0;
-  }
-}
-.popover-bottom > .popover-arrow {
-  top: -$popover-arrow-outer-width;
-  left: 50%;
-  margin-left: -$popover-arrow-outer-width;
-  border-top-width: 0;
-  border-bottom-color: $popover-arrow-outer-color;
-  &:after {
-    top: 1px;
-    margin-left: -$popover-arrow-width;
-    content: "";
-    border-top-width: 0;
-    border-bottom-color: $popover-arrow-color;
-  }
-}
-
-.popover-left > .popover-arrow {
-  top: 50%;
-  right: -$popover-arrow-outer-width;
-  margin-top: -$popover-arrow-outer-width;
-  border-right-width: 0;
-  border-left-color: $popover-arrow-outer-color;
-  &:after {
-    right: 1px;
-    bottom: -$popover-arrow-width;
-    content: "";
-    border-right-width: 0;
-    border-left-color: $popover-arrow-color;
-  }
-}
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index 379d6d5e6..289998611 100644
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -16,23 +16,59 @@
   opacity: 0;
 
   &.in { opacity: $tooltip-opacity; }
-}
 
-.tooltip-top {
-  padding: $tooltip-arrow-width 0;
-  margin-top: -3px;
-}
-.tooltip-right {
-  padding: 0 $tooltip-arrow-width;
-  margin-left: 3px;
-}
-.tooltip-bottom {
-  padding: $tooltip-arrow-width 0;
-  margin-top: 3px;
-}
-.tooltip-left {
-  padding: 0 $tooltip-arrow-width;
-  margin-left: -3px;
+  &.tooltip-top,
+  &.bs-tether-element-attached-bottom {
+    padding: $tooltip-arrow-width 0;
+    margin-top: -3px;
+
+    .tooltip-arrow {
+      bottom: 0;
+      left: 50%;
+      margin-left: -$tooltip-arrow-width;
+      border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
+      border-top-color: $tooltip-arrow-color;
+    }
+  }
+  &.tooltip-right,
+  &.bs-tether-element-attached-left {
+    padding: 0 $tooltip-arrow-width;
+    margin-left: 3px;
+
+    .tooltip-arrow {
+      top: 50%;
+      left: 0;
+      margin-top: -$tooltip-arrow-width;
+      border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
+      border-right-color: $tooltip-arrow-color;
+    }
+  }
+  &.tooltip-bottom,
+  &.bs-tether-element-attached-top {
+    padding: $tooltip-arrow-width 0;
+    margin-top: 3px;
+
+    .tooltip-arrow {
+      top: 0;
+      left: 50%;
+      margin-left: -$tooltip-arrow-width;
+      border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
+      border-bottom-color: $tooltip-arrow-color;
+    }
+  }
+  &.tooltip-left,
+  &.bs-tether-element-attached-right {
+    padding: 0 $tooltip-arrow-width;
+    margin-left: -3px;
+
+    .tooltip-arrow {
+      top: 50%;
+      right: 0;
+      margin-top: -$tooltip-arrow-width;
+      border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
+      border-left-color: $tooltip-arrow-color;
+    }
+  }
 }
 
 // Wrapper for the tooltip content
@@ -53,32 +89,4 @@
   height: 0;
   border-color: transparent;
   border-style: solid;
-}
-.tooltip-top .tooltip-arrow {
-  bottom: 0;
-  left: 50%;
-  margin-left: -$tooltip-arrow-width;
-  border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
-  border-top-color: $tooltip-arrow-color;
-}
-.tooltip-right .tooltip-arrow {
-  top: 50%;
-  left: 0;
-  margin-top: -$tooltip-arrow-width;
-  border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
-  border-right-color: $tooltip-arrow-color;
-}
-.tooltip-left .tooltip-arrow {
-  top: 50%;
-  right: 0;
-  margin-top: -$tooltip-arrow-width;
-  border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
-  border-left-color: $tooltip-arrow-color;
-}
-.tooltip-bottom .tooltip-arrow {
-  top: 0;
-  left: 50%;
-  margin-left: -$tooltip-arrow-width;
-  border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
-  border-bottom-color: $tooltip-arrow-color;
-}
+}
\ No newline at end of file