rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-18 10:52:19 +01:00
Code Issues Actions Packages Releases Activity

Merge branch 'fix-arrows' of https://github.com/simonihmig/bootstrap into simonihmig-fix-arrows

Browse Source
This commit is contained in:
Mark Otto 2017-12-26 21:36:12 -08:00
commit 6cf71f298c
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;
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;
}
}

29
scss/_tooltip.scss
View File

@ -28,55 +28,58 @@
}
&.bs-tooltip-top {
padding: $tooltip-arrow-width 0;
padding: $tooltip-arrow-height 0;
.arrow {
bottom: 0;
}
.arrow::before {
margin-left: -$tooltip-arrow-width;
top: 0;
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;
}
}
&.bs-tooltip-right {
padding: 0 $tooltip-arrow-width;
padding: 0 $tooltip-arrow-height;
.arrow {
left: 0;
width: $tooltip-arrow-height;
height: $tooltip-arrow-width;
}
.arrow::before {
margin-top: -$tooltip-arrow-width;
right: 0;
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;
}
}
&.bs-tooltip-bottom {
padding: $tooltip-arrow-width 0;
padding: $tooltip-arrow-height 0;
.arrow {
top: 0;
}
.arrow::before {
margin-left: -$tooltip-arrow-width;
bottom: 0;
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;
}
}
&.bs-tooltip-left {
padding: 0 $tooltip-arrow-width;
padding: 0 $tooltip-arrow-height;
.arrow {
right: 0;
width: $tooltip-arrow-height;
height: $tooltip-arrow-width;
}
.arrow::before {
right: 0;
margin-top: -($tooltip-arrow-width);
left: 0;
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;
}
}

8
scss/_variables.scss
View File

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