root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Fix tooltip/popover arrow size and position

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
scss/_popover.scss
View File

@ -26,96 +26,88 @@
display: block; display: block;
width: $popover-arrow-width; width: $popover-arrow-width;
height: $popover-arrow-height; height: $popover-arrow-height;
margin: 0 $border-radius-lg;
} }
.arrow::before, .arrow::before,
.arrow::after { .arrow::after {
position: absolute; position: absolute;
display: block; display: block;
content: "";
border-color: transparent; border-color: transparent;
border-style: solid; border-style: solid;
} }
.arrow::before {
content: "";
border-width: $popover-arrow-width;
}
.arrow::after {
content: "";
border-width: $popover-arrow-width;
}
// Popover directions // Popover directions
&.bs-popover-top { &.bs-popover-top {
margin-bottom: $popover-arrow-width; margin-bottom: $popover-arrow-height;
.arrow { .arrow {
bottom: 0; bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
} }
.arrow::before, .arrow::before,
.arrow::after { .arrow::after {
border-bottom-width: 0; border-width: $popover-arrow-height $popover-arrow-width/2 0;
} }
.arrow::before { .arrow::before {
bottom: -$popover-arrow-width; bottom: 0;
margin-left: -$popover-arrow-width;
border-top-color: $popover-arrow-outer-color; border-top-color: $popover-arrow-outer-color;
} }
.arrow::after { .arrow::after {
bottom: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1); bottom: $popover-border-width;
margin-left: -$popover-arrow-width;
border-top-color: $popover-arrow-color; border-top-color: $popover-arrow-color;
} }
} }
&.bs-popover-right { &.bs-popover-right {
margin-left: $popover-arrow-width; margin-left: $popover-arrow-height;
.arrow { .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::before,
.arrow::after { .arrow::after {
margin-top: -$popover-arrow-width; border-width: $popover-arrow-width/2 $popover-arrow-height $popover-arrow-width/2 0;
border-left-width: 0;
} }
.arrow::before { .arrow::before {
left: -$popover-arrow-width; left: 0;
border-right-color: $popover-arrow-outer-color; border-right-color: $popover-arrow-outer-color;
} }
.arrow::after { .arrow::after {
left: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1); left: $popover-border-width;
border-right-color: $popover-arrow-color; border-right-color: $popover-arrow-color;
} }
} }
&.bs-popover-bottom { &.bs-popover-bottom {
margin-top: $popover-arrow-width; margin-top: $popover-arrow-height;
.arrow { .arrow {
top: 0; top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
} }
.arrow::before, .arrow::before,
.arrow::after { .arrow::after {
margin-left: -$popover-arrow-width; border-width: 0 $popover-arrow-width/2 $popover-arrow-height $popover-arrow-width/2;
border-top-width: 0;
} }
.arrow::before { .arrow::before {
top: -$popover-arrow-width; top: 0;
border-bottom-color: $popover-arrow-outer-color; border-bottom-color: $popover-arrow-outer-color;
} }
.arrow::after { .arrow::after {
top: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1); top: $popover-border-width;
border-bottom-color: $popover-arrow-color; border-bottom-color: $popover-arrow-color;
} }
@ -125,33 +117,35 @@
top: 0; top: 0;
left: 50%; left: 50%;
display: block; display: block;
width: 20px; width: $popover-arrow-width;
margin-left: -10px; margin-left: -$popover-arrow-width/2;
content: ""; content: "";
border-bottom: $popover-border-width solid $popover-header-bg; border-bottom: $popover-border-width solid $popover-header-bg;
} }
} }
&.bs-popover-left { &.bs-popover-left {
margin-right: $popover-arrow-width; margin-right: $popover-arrow-height;
.arrow { .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::before,
.arrow::after { .arrow::after {
margin-top: -$popover-arrow-width; border-width: $popover-arrow-width/2 0 $popover-arrow-width/2 $popover-arrow-height;
border-right-width: 0;
} }
.arrow::before { .arrow::before {
right: -$popover-arrow-width; right: 0;
border-left-color: $popover-arrow-outer-color; border-left-color: $popover-arrow-outer-color;
} }
.arrow::after { .arrow::after {
right: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1); right: $popover-border-width;
border-left-color: $popover-arrow-color; border-left-color: $popover-arrow-color;
} }
} }

29
scss/_tooltip.scss
View File

@ -28,55 +28,58 @@
} }
&.bs-tooltip-top { &.bs-tooltip-top {
padding: $tooltip-arrow-width 0; padding: $tooltip-arrow-height 0;
.arrow { .arrow {
bottom: 0; bottom: 0;
} }
.arrow::before { .arrow::before {
margin-left: -$tooltip-arrow-width; top: 0;
content: ""; content: "";
border-width: $tooltip-arrow-width $tooltip-arrow-width 0; border-width: $tooltip-arrow-height $tooltip-arrow-width/2 0;
border-top-color: $tooltip-arrow-color; border-top-color: $tooltip-arrow-color;
} }
} }
&.bs-tooltip-right { &.bs-tooltip-right {
padding: 0 $tooltip-arrow-width; padding: 0 $tooltip-arrow-height;
.arrow { .arrow {
left: 0; left: 0;
width: $tooltip-arrow-height;
height: $tooltip-arrow-width;
} }
.arrow::before { .arrow::before {
margin-top: -$tooltip-arrow-width; right: 0;
content: ""; content: "";
border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0; border-width: $tooltip-arrow-width/2 $tooltip-arrow-height $tooltip-arrow-width/2 0;
border-right-color: $tooltip-arrow-color; border-right-color: $tooltip-arrow-color;
} }
} }
&.bs-tooltip-bottom { &.bs-tooltip-bottom {
padding: $tooltip-arrow-width 0; padding: $tooltip-arrow-height 0;
.arrow { .arrow {
top: 0; top: 0;
} }
.arrow::before { .arrow::before {
margin-left: -$tooltip-arrow-width; bottom: 0;
content: ""; content: "";
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; border-width: 0 $tooltip-arrow-width/2 $tooltip-arrow-height;
border-bottom-color: $tooltip-arrow-color; border-bottom-color: $tooltip-arrow-color;
} }
} }
&.bs-tooltip-left { &.bs-tooltip-left {
padding: 0 $tooltip-arrow-width; padding: 0 $tooltip-arrow-height;
.arrow { .arrow {
right: 0; right: 0;
width: $tooltip-arrow-height;
height: $tooltip-arrow-width;
} }
.arrow::before { .arrow::before {
right: 0; left: 0;
margin-top: -($tooltip-arrow-width);
content: ""; content: "";
border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width; border-width: $tooltip-arrow-width/2 0 $tooltip-arrow-width/2 $tooltip-arrow-height;
border-left-color: $tooltip-arrow-color; border-left-color: $tooltip-arrow-color;
} }
} }

8
scss/_variables.scss
View File

@ -682,8 +682,8 @@ $tooltip-padding-y: .25rem !default;
$tooltip-padding-x: .5rem !default; $tooltip-padding-x: .5rem !default;
$tooltip-margin: 0 !default; $tooltip-margin: 0 !default;
$tooltip-arrow-width: .4rem !default; $tooltip-arrow-width: .8rem !default;
$tooltip-arrow-height: $tooltip-arrow-width !default; $tooltip-arrow-height: .4rem !default;
$tooltip-arrow-color: $tooltip-bg !default; $tooltip-arrow-color: $tooltip-bg !default;
@ -704,8 +704,8 @@ $popover-body-color: $body-color !default;
$popover-body-padding-y: $popover-header-padding-y !default; $popover-body-padding-y: $popover-header-padding-y !default;
$popover-body-padding-x: $popover-header-padding-x !default; $popover-body-padding-x: $popover-header-padding-x !default;
$popover-arrow-width: .8rem !default; $popover-arrow-width: 1.6rem !default;
$popover-arrow-height: .4rem !default; $popover-arrow-height: .8rem !default;
$popover-arrow-color: $popover-bg !default; $popover-arrow-color: $popover-bg !default;
$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;