kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

Cleanup popover arrows (#28008)

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

92
scss/_popover.scss
View File

@ -40,21 +40,18 @@
> .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 { bottom: 0;
border-width: $popover-arrow-height ($popover-arrow-width / 2) 0; border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
} border-top-color: $popover-arrow-outer-color;
}
> .arrow::before { &::after {
bottom: 0; bottom: $popover-border-width;
border-top-color: $popover-arrow-outer-color; border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
} border-top-color: $popover-arrow-color;
}
> .arrow::after {
bottom: $popover-border-width;
border-top-color: $popover-arrow-color;
} }
} }
@ -66,21 +63,18 @@
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 { left: 0;
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;
} border-right-color: $popover-arrow-outer-color;
}
> .arrow::before { &::after {
left: 0; left: $popover-border-width;
border-right-color: $popover-arrow-outer-color; border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
} border-right-color: $popover-arrow-color;
}
> .arrow::after {
left: $popover-border-width;
border-right-color: $popover-arrow-color;
} }
} }
@ -89,21 +83,18 @@
> .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 { top: 0;
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);
} border-bottom-color: $popover-arrow-outer-color;
}
> .arrow::before { &::after {
top: 0; top: $popover-border-width;
border-bottom-color: $popover-arrow-outer-color; border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
} border-bottom-color: $popover-arrow-color;
}
> .arrow::after {
top: $popover-border-width;
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
@ -127,21 +118,18 @@
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 { right: 0;
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;
} border-left-color: $popover-arrow-outer-color;
}
> .arrow::before { &::after {
right: 0; right: $popover-border-width;
border-left-color: $popover-arrow-outer-color; border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
} border-left-color: $popover-arrow-color;
}
> .arrow::after {
right: $popover-border-width;
border-left-color: $popover-arrow-color;
} }
} }