diff --git a/scss/_popover.scss b/scss/_popover.scss
index 90241ccbb5e49483d5d0335ec9c08935072e3784..a614518c7f7efa7c46fa7f893629d2c162e33a65 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;
+}
+.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;
- &: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;
+}
+.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-outer-color;
- &:after {
- top: 1px;
- margin-left: -$popover-arrow-width;
- content: "";
- border-top-width: 0;
- border-bottom-color: $popover-arrow-color;
- }
+ border-bottom-color: $popover-arrow-color;
}
+}
- &.popover-left > .popover-arrow {
- top: 50%;
- right: -$popover-arrow-outer-width;
- margin-top: -$popover-arrow-outer-width;
+.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-outer-color;
- &:after {
- right: 1px;
- bottom: -$popover-arrow-width;
- content: "";
- border-right-width: 0;
- border-left-color: $popover-arrow-color;
- }
+ border-left-color: $popover-arrow-color;
}
}
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index 0d5658d9fd5e765f5241fe598bf16ac7fc592b3a..49af2b28815cc6e5bc27844799fa19e6358a9bf6 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;
}