Skip to content
GitLab
Commit 654d0dff authored by Chris Rebert's avatar Chris Rebert
Browse files

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

parent c6ad3a8d
Hide whitespace changes
Inline Side-by-side
Showing
with 16 additions and 16 deletions
+16 -16
scss/_popover.scss
+ 8
- 8
View file @ 654d0dff
...@@ -26,10 +26,10 @@ ...@@ -26,10 +26,10 @@
@include box-shadow(0 5px 10px rgba(0,0,0,.2)); @include box-shadow(0 5px 10px rgba(0,0,0,.2));
// Offset the popover to account for the popover arrow // Offset the popover to account for the popover arrow
&.top { margin-top: -$popover-arrow-width; } &.popover-top { margin-top: -$popover-arrow-width; }
&.right { margin-left: $popover-arrow-width; } &.popover-right { margin-left: $popover-arrow-width; }
&.bottom { margin-top: $popover-arrow-width; } &.popover-bottom { margin-top: $popover-arrow-width; }
&.left { margin-left: -$popover-arrow-width; } &.popover-left { margin-left: -$popover-arrow-width; }
} }
.popover-title { .popover-title {
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
} }
.popover { .popover {
&.top > .popover-arrow { &.popover-top > .popover-arrow {
bottom: -$popover-arrow-outer-width; bottom: -$popover-arrow-outer-width;
left: 50%; left: 50%;
margin-left: -$popover-arrow-outer-width; margin-left: -$popover-arrow-outer-width;
...@@ -83,7 +83,7 @@ ...@@ -83,7 +83,7 @@
border-bottom-width: 0; border-bottom-width: 0;
} }
} }
&.right > .popover-arrow { &.popover-right > .popover-arrow {
top: 50%; top: 50%;
left: -$popover-arrow-outer-width; left: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width; margin-top: -$popover-arrow-outer-width;
...@@ -97,7 +97,7 @@ ...@@ -97,7 +97,7 @@
border-left-width: 0; border-left-width: 0;
} }
} }
&.bottom > .popover-arrow { &.popover-bottom > .popover-arrow {
top: -$popover-arrow-outer-width; top: -$popover-arrow-outer-width;
left: 50%; left: 50%;
margin-left: -$popover-arrow-outer-width; margin-left: -$popover-arrow-outer-width;
...@@ -112,7 +112,7 @@ ...@@ -112,7 +112,7 @@
} }
} }
&.left > .popover-arrow { &.popover-left > .popover-arrow {
top: 50%; top: 50%;
right: -$popover-arrow-outer-width; right: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width; margin-top: -$popover-arrow-outer-width;
......
scss/_tooltip.scss
+ 8
- 8
View file @ 654d0dff
...@@ -18,22 +18,22 @@ ...@@ -18,22 +18,22 @@
&.in { opacity: $tooltip-opacity; } &.in { opacity: $tooltip-opacity; }
&.top { &.tooltip-top {
padding: $tooltip-arrow-width 0; padding: $tooltip-arrow-width 0;
margin-top: -3px; margin-top: -3px;
} }
&.right { &.tooltip-right {
padding: 0 $tooltip-arrow-width; padding: 0 $tooltip-arrow-width;
margin-left: 3px; margin-left: 3px;
} }
&.bottom { &.tooltip-bottom {
padding: $tooltip-arrow-width 0; padding: $tooltip-arrow-width 0;
margin-top: 3px; margin-top: 3px;
} }
&.left { &.tooltip-left {
padding: 0 $tooltip-arrow-width; padding: 0 $tooltip-arrow-width;
margin-left: -3px; margin-left: -3px;
} }
...@@ -59,28 +59,28 @@ ...@@ -59,28 +59,28 @@
border-style: solid; border-style: solid;
} }
.tooltip { .tooltip {
&.top .tooltip-arrow { &.tooltip-top .tooltip-arrow {
bottom: 0; bottom: 0;
left: 50%; left: 50%;
margin-left: -$tooltip-arrow-width; margin-left: -$tooltip-arrow-width;
border-width: $tooltip-arrow-width $tooltip-arrow-width 0; border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
border-top-color: $tooltip-arrow-color; border-top-color: $tooltip-arrow-color;
} }
&.right .tooltip-arrow { &.tooltip-right .tooltip-arrow {
top: 50%; top: 50%;
left: 0; left: 0;
margin-top: -$tooltip-arrow-width; margin-top: -$tooltip-arrow-width;
border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0; border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
border-right-color: $tooltip-arrow-color; border-right-color: $tooltip-arrow-color;
} }
&.left .tooltip-arrow { &.tooltip-left .tooltip-arrow {
top: 50%; top: 50%;
right: 0; right: 0;
margin-top: -$tooltip-arrow-width; margin-top: -$tooltip-arrow-width;
border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width; border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
border-left-color: $tooltip-arrow-color; border-left-color: $tooltip-arrow-color;
} }
&.bottom .tooltip-arrow { &.tooltip-bottom .tooltip-arrow {
top: 0; top: 0;
left: 50%; left: 50%;
margin-left: -$tooltip-arrow-width; margin-left: -$tooltip-arrow-width;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment