CSS: prefix .{right,left,top,bottom} with 'tooltip-'/'popover'

diff --git a/scss/_popover.scss b/scss/_popover.scss
index 8fc1cf93158671258620c689f583d0e2b857c4a3..90241ccbb5e49483d5d0335ec9c08935072e3784 100644 (file)
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -26,10 +26,10 @@
   @include box-shadow(0 5px 10px rgba(0,0,0,.2));
 
   // Offset the popover to account for the popover arrow
-  &.top     { margin-top: -$popover-arrow-width; }
-  &.right   { margin-left: $popover-arrow-width; }
-  &.bottom  { margin-top: $popover-arrow-width; }
-  &.left    { margin-left: -$popover-arrow-width; }
+  &.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 {
@@ -69,7 +69,7 @@
 }
 
 .popover {
-  &.top > .popover-arrow {
+  &.popover-top > .popover-arrow {
     bottom: -$popover-arrow-outer-width;
     left: 50%;
     margin-left: -$popover-arrow-outer-width;
@@ -83,7 +83,7 @@
       border-bottom-width: 0;
     }
   }
-  &.right > .popover-arrow {
+  &.popover-right > .popover-arrow {
     top: 50%;
     left: -$popover-arrow-outer-width;
     margin-top: -$popover-arrow-outer-width;
@@ -97,7 +97,7 @@
       border-left-width: 0;
     }
   }
-  &.bottom > .popover-arrow {
+  &.popover-bottom > .popover-arrow {
     top: -$popover-arrow-outer-width;
     left: 50%;
     margin-left: -$popover-arrow-outer-width;
@@ -112,7 +112,7 @@
     }
   }
 
-  &.left > .popover-arrow {
+  &.popover-left > .popover-arrow {
     top: 50%;
     right: -$popover-arrow-outer-width;
     margin-top: -$popover-arrow-outer-width;

diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index b1e3f4666c041ec05a6972448d8b1f64ea620daf..0d5658d9fd5e765f5241fe598bf16ac7fc592b3a 100644 (file)
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -18,22 +18,22 @@
 
   &.in { opacity: $tooltip-opacity; }
 
-  &.top {
+  &.tooltip-top {
     padding: $tooltip-arrow-width 0;
     margin-top: -3px;
   }
 
-  &.right {
+  &.tooltip-right {
     padding: 0 $tooltip-arrow-width;
     margin-left: 3px;
   }
 
-  &.bottom {
+  &.tooltip-bottom {
     padding: $tooltip-arrow-width 0;
     margin-top: 3px;
   }
 
-  &.left {
+  &.tooltip-left {
     padding: 0 $tooltip-arrow-width;
     margin-left: -3px;
   }
@@ -59,28 +59,28 @@
   border-style: solid;
 }
 .tooltip {
-  &.top .tooltip-arrow {
+  &.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;
   }
-  &.right .tooltip-arrow {
+  &.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;
   }
-  &.left .tooltip-arrow {
+  &.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;
   }
-  &.bottom .tooltip-arrow {
+  &.tooltip-bottom .tooltip-arrow {
     top: 0;
     left: 50%;
     margin-left: -$tooltip-arrow-width;