From a0edcc9225b3f83d172b39070892fc96476c1b0c Mon Sep 17 00:00:00 2001
From: Chris Rebert <code@rebertia.com>
Date: Fri, 19 Dec 2014 19:10:10 -0800
Subject: [PATCH] refactor tooltip+popover CSS to decrease chaining+nesting

---
 scss/_popover.scss | 122 ++++++++++++++++++++++-----------------------
 scss/_tooltip.scss |  91 ++++++++++++++++-----------------
 2 files changed, 103 insertions(+), 110 deletions(-)

diff --git a/scss/_popover.scss b/scss/_popover.scss
index 90241ccbb5..a614518c7f 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -24,14 +24,14 @@
   border: 1px solid $popover-border-color;
   @include border-radius($border-radius-lg);
   @include box-shadow(0 5px 10px rgba(0,0,0,.2));
-
-  // 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-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; }
+
 .popover-title {
   padding: 8px 14px;
   margin: 0; // reset heading margin
@@ -68,62 +68,60 @@
   border-width: $popover-arrow-width;
 }
 
-.popover {
-  &.popover-top > .popover-arrow {
-    bottom: -$popover-arrow-outer-width;
-    left: 50%;
-    margin-left: -$popover-arrow-outer-width;
-    border-top-color: $popover-arrow-outer-color;
+.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;
-    &: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;
-    }
+  }
+}
+.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 0d5658d9fd..49af2b2881 100644
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -17,26 +17,23 @@
   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 {
+  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;
 }
 
 // Wrapper for the tooltip content
@@ -58,33 +55,31 @@
   border-color: transparent;
   border-style: solid;
 }
-.tooltip {
-  &.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;
-  }
+.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;
 }