mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-19 11:51:23 +02:00
Code Issues Releases Wiki Activity

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

Browse Source
This commit is contained in:
Chris Rebert
2014-12-19 18:39:12 -08:00
parent c6ad3a8d6d
commit 654d0dffc9
2 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
scss/_popover.scss
View File

@@ -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 @@
} }
.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 @@
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 @@
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 @@
} }
} }
&.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;

16
scss/_tooltip.scss
View File

@@ -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 @@
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;