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

Fix tooltip/popover arrow size and position

Browse Source
This commit is contained in:
simonihmig
2017-12-23 01:57:08 +01:00
parent 5cede31469
commit 9600ab1003
3 changed files with 50 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
scss/_popover.scss
View File

@@ -26,96 +26,88 @@
display: block;
width: $popover-arrow-width;
height: $popover-arrow-height;
margin: 0 $border-radius-lg;
}
.arrow::before,
.arrow::after {
position: absolute;
display: block;
content: "";
border-color: transparent;
border-style: solid;
}
.arrow::before {
content: "";
border-width: $popover-arrow-width;
}
.arrow::after {
content: "";
border-width: $popover-arrow-width;
}
// Popover directions
&.bs-popover-top {
margin-bottom: $popover-arrow-width;
margin-bottom: $popover-arrow-height;
.arrow {
bottom: 0;
bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
}
.arrow::before,
.arrow::after {
border-bottom-width: 0;
border-width: $popover-arrow-height $popover-arrow-width/2 0;
}
.arrow::before {
bottom: -$popover-arrow-width;
margin-left: -$popover-arrow-width;
bottom: 0;
border-top-color: $popover-arrow-outer-color;
}
.arrow::after {
bottom: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
margin-left: -$popover-arrow-width;
bottom: $popover-border-width;
border-top-color: $popover-arrow-color;
}
}
&.bs-popover-right {
margin-left: $popover-arrow-width;
margin-left: $popover-arrow-height;
.arrow {
left: 0;
left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
width: $popover-arrow-height;
height: $popover-arrow-width;
margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
}
.arrow::before,
.arrow::after {
margin-top: -$popover-arrow-width;
border-left-width: 0;
border-width: $popover-arrow-width/2 $popover-arrow-height $popover-arrow-width/2 0;
}
.arrow::before {
left: -$popover-arrow-width;
left: 0;
border-right-color: $popover-arrow-outer-color;
}
.arrow::after {
left: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
left: $popover-border-width;
border-right-color: $popover-arrow-color;
}
}
&.bs-popover-bottom {
margin-top: $popover-arrow-width;
margin-top: $popover-arrow-height;
.arrow {
top: 0;
top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
}
.arrow::before,
.arrow::after {
margin-left: -$popover-arrow-width;
border-top-width: 0;
border-width: 0 $popover-arrow-width/2 $popover-arrow-height $popover-arrow-width/2;
}
.arrow::before {
top: -$popover-arrow-width;
top: 0;
border-bottom-color: $popover-arrow-outer-color;
}
.arrow::after {
top: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
top: $popover-border-width;
border-bottom-color: $popover-arrow-color;
}
@@ -125,33 +117,35 @@
top: 0;
left: 50%;
display: block;
width: 20px;
margin-left: -10px;
width: $popover-arrow-width;
margin-left: -$popover-arrow-width/2;
content: "";
border-bottom: $popover-border-width solid $popover-header-bg;
}
}
&.bs-popover-left {
margin-right: $popover-arrow-width;
margin-right: $popover-arrow-height;
.arrow {
right: 0;
right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
width: $popover-arrow-height;
height: $popover-arrow-width;
margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
}
.arrow::before,
.arrow::after {
margin-top: -$popover-arrow-width;
border-right-width: 0;
border-width: $popover-arrow-width/2 0 $popover-arrow-width/2 $popover-arrow-height;
}
.arrow::before {
right: -$popover-arrow-width;
right: 0;
border-left-color: $popover-arrow-outer-color;
}
.arrow::after {
right: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
right: $popover-border-width;
border-left-color: $popover-arrow-color;
}
}