mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-26 14:54:27 +02:00
Code Issues Releases Wiki Activity

Cleanup popover arrows (#28008)

Browse Source
This commit is contained in:
Martijn Cuppens
2019-01-14 01:29:37 +01:00
committed by Mark Otto
parent 70f50f3079
commit d546cb8374
1 changed files with 40 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
scss/_popover.scss
View File

@@ -40,22 +40,19 @@
> .arrow { > .arrow {
bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
}
> .arrow::before, &::before {
> .arrow::after {
border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
}
> .arrow::before {
bottom: 0; bottom: 0;
border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
border-top-color: $popover-arrow-outer-color; border-top-color: $popover-arrow-outer-color;
} }
> .arrow::after { &::after {
bottom: $popover-border-width; bottom: $popover-border-width;
border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
border-top-color: $popover-arrow-color; border-top-color: $popover-arrow-color;
} }
}
} }
.bs-popover-right { .bs-popover-right {
@@ -66,22 +63,19 @@
width: $popover-arrow-height; width: $popover-arrow-height;
height: $popover-arrow-width; height: $popover-arrow-width;
margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
}
> .arrow::before, &::before {
> .arrow::after {
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
}
> .arrow::before {
left: 0; left: 0;
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
border-right-color: $popover-arrow-outer-color; border-right-color: $popover-arrow-outer-color;
} }
> .arrow::after { &::after {
left: $popover-border-width; left: $popover-border-width;
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
border-right-color: $popover-arrow-color; border-right-color: $popover-arrow-color;
} }
}
} }
.bs-popover-bottom { .bs-popover-bottom {
@@ -89,22 +83,19 @@
> .arrow { > .arrow {
top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
}
> .arrow::before, &::before {
> .arrow::after {
border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
}
> .arrow::before {
top: 0; top: 0;
border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
border-bottom-color: $popover-arrow-outer-color; border-bottom-color: $popover-arrow-outer-color;
} }
> .arrow::after { &::after {
top: $popover-border-width; top: $popover-border-width;
border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
border-bottom-color: $popover-arrow-color; border-bottom-color: $popover-arrow-color;
} }
}
// This will remove the popover-header's border just below the arrow // This will remove the popover-header's border just below the arrow
.popover-header::before { .popover-header::before {
@@ -127,22 +118,19 @@
width: $popover-arrow-height; width: $popover-arrow-height;
height: $popover-arrow-width; height: $popover-arrow-width;
margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
}
> .arrow::before, &::before {
> .arrow::after {
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
}
> .arrow::before {
right: 0; right: 0;
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
border-left-color: $popover-arrow-outer-color; border-left-color: $popover-arrow-outer-color;
} }
> .arrow::after { &::after {
right: $popover-border-width; right: $popover-border-width;
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
border-left-color: $popover-arrow-color; border-left-color: $popover-arrow-color;
} }
}
} }
.bs-popover-auto { .bs-popover-auto {