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

Apply arrow styles to direct descendants of bootstrap popover classes

Browse Source 
With the current styles, it is not possible to nest a popover inside of
another popover if they have different placements because the arrow
styles of the parent popover will conflict with the arrow styles of the
child popover.
This commit is contained in:
Sam Tape 2018-11-30 14:29:31 -06:00 committed by Mark Otto
parent f6abb4976f
commit 9d3930b6dd
1 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
scss/_popover.scss
View File

@ -38,21 +38,21 @@
.bs-popover-top { .bs-popover-top {
margin-bottom: $popover-arrow-height; margin-bottom: $popover-arrow-height;
.arrow { > .arrow {
bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
} }
.arrow::before, > .arrow::before,
.arrow::after { > .arrow::after {
border-width: $popover-arrow-height ($popover-arrow-width / 2) 0; border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
} }
.arrow::before { > .arrow::before {
bottom: 0; bottom: 0;
border-top-color: $popover-arrow-outer-color; border-top-color: $popover-arrow-outer-color;
} }
.arrow::after { > .arrow::after {
bottom: $popover-border-width; bottom: $popover-border-width;
border-top-color: $popover-arrow-color; border-top-color: $popover-arrow-color;
} }
@ -61,24 +61,24 @@
.bs-popover-right { .bs-popover-right {
margin-left: $popover-arrow-height; margin-left: $popover-arrow-height;
.arrow { > .arrow {
left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
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, > .arrow::before,
.arrow::after { > .arrow::after {
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0; border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
} }
.arrow::before { > .arrow::before {
left: 0; left: 0;
border-right-color: $popover-arrow-outer-color; border-right-color: $popover-arrow-outer-color;
} }
.arrow::after { > .arrow::after {
left: $popover-border-width; left: $popover-border-width;
border-right-color: $popover-arrow-color; border-right-color: $popover-arrow-color;
} }
@ -87,21 +87,21 @@
.bs-popover-bottom { .bs-popover-bottom {
margin-top: $popover-arrow-height; margin-top: $popover-arrow-height;
.arrow { > .arrow {
top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
} }
.arrow::before, > .arrow::before,
.arrow::after { > .arrow::after {
border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2); border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
} }
.arrow::before { > .arrow::before {
top: 0; top: 0;
border-bottom-color: $popover-arrow-outer-color; border-bottom-color: $popover-arrow-outer-color;
} }
.arrow::after { > .arrow::after {
top: $popover-border-width; top: $popover-border-width;
border-bottom-color: $popover-arrow-color; border-bottom-color: $popover-arrow-color;
} }
@ -122,24 +122,24 @@
.bs-popover-left { .bs-popover-left {
margin-right: $popover-arrow-height; margin-right: $popover-arrow-height;
.arrow { > .arrow {
right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
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, > .arrow::before,
.arrow::after { > .arrow::after {
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height; border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
} }
.arrow::before { > .arrow::before {
right: 0; right: 0;
border-left-color: $popover-arrow-outer-color; border-left-color: $popover-arrow-outer-color;
} }
.arrow::after { > .arrow::after {
right: $popover-border-width; right: $popover-border-width;
border-left-color: $popover-arrow-color; border-left-color: $popover-arrow-color;
} }