aboutsummaryrefslogtreecommitdiffstats
path: root/vendor/twbs/bootstrap/scss/_popover.scss
diff options
context:
space:
mode:
Diffstat (limited to 'vendor/twbs/bootstrap/scss/_popover.scss')
-rw-r--r--vendor/twbs/bootstrap/scss/_popover.scss60
1 files changed, 24 insertions, 36 deletions
diff --git a/vendor/twbs/bootstrap/scss/_popover.scss b/vendor/twbs/bootstrap/scss/_popover.scss
index 0ad76af3e..3b8208e16 100644
--- a/vendor/twbs/bootstrap/scss/_popover.scss
+++ b/vendor/twbs/bootstrap/scss/_popover.scss
@@ -1,7 +1,7 @@
.popover {
position: absolute;
top: 0;
- left: 0;
+ left: 0 #{"/* rtl:ignore */"};
z-index: $zindex-popover;
display: block;
max-width: $popover-max-width;
@@ -17,12 +17,11 @@
@include border-radius($popover-border-radius);
@include box-shadow($popover-box-shadow);
- .arrow {
+ .popover-arrow {
position: absolute;
display: block;
width: $popover-arrow-width;
height: $popover-arrow-height;
- margin: 0 $popover-border-radius;
&::before,
&::after {
@@ -36,63 +35,56 @@
}
.bs-popover-top {
- margin-bottom: $popover-arrow-height;
-
- > .arrow {
+ > .popover-arrow {
bottom: subtract(-$popover-arrow-height, $popover-border-width);
&::before {
bottom: 0;
- border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
+ border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
border-top-color: $popover-arrow-outer-color;
}
&::after {
bottom: $popover-border-width;
- border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
+ border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
border-top-color: $popover-arrow-color;
}
}
}
-.bs-popover-right {
- margin-left: $popover-arrow-height;
-
- > .arrow {
+.bs-popover-end {
+ > .popover-arrow {
left: subtract(-$popover-arrow-height, $popover-border-width);
width: $popover-arrow-height;
height: $popover-arrow-width;
- margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
&::before {
left: 0;
- border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
+ border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
border-right-color: $popover-arrow-outer-color;
}
&::after {
left: $popover-border-width;
- border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
+ border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
border-right-color: $popover-arrow-color;
}
}
}
.bs-popover-bottom {
- margin-top: $popover-arrow-height;
-
- > .arrow {
+ > .popover-arrow {
top: subtract(-$popover-arrow-height, $popover-border-width);
&::before {
top: 0;
- border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
+ border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
border-bottom-color: $popover-arrow-outer-color;
}
&::after {
top: $popover-border-width;
- border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
+ border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
border-bottom-color: $popover-arrow-color;
}
}
@@ -104,51 +96,47 @@
left: 50%;
display: block;
width: $popover-arrow-width;
- margin-left: -$popover-arrow-width / 2;
+ margin-left: -$popover-arrow-width * .5;
content: "";
border-bottom: $popover-border-width solid $popover-header-bg;
}
}
-.bs-popover-left {
- margin-right: $popover-arrow-height;
-
- > .arrow {
+.bs-popover-start {
+ > .popover-arrow {
right: subtract(-$popover-arrow-height, $popover-border-width);
width: $popover-arrow-height;
height: $popover-arrow-width;
- margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
&::before {
right: 0;
- border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
+ border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
border-left-color: $popover-arrow-outer-color;
}
&::after {
right: $popover-border-width;
- border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
+ border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
border-left-color: $popover-arrow-color;
}
}
}
.bs-popover-auto {
- &[x-placement^="top"] {
+ &[data-popper-placement^="top"] {
@extend .bs-popover-top;
}
- &[x-placement^="right"] {
- @extend .bs-popover-right;
+ &[data-popper-placement^="right"] {
+ @extend .bs-popover-end;
}
- &[x-placement^="bottom"] {
+ &[data-popper-placement^="bottom"] {
@extend .bs-popover-bottom;
}
- &[x-placement^="left"] {
- @extend .bs-popover-left;
+ &[data-popper-placement^="left"] {
+ @extend .bs-popover-start;
}
}
-
// Offset the popover to account for the popover arrow
.popover-header {
padding: $popover-header-padding-y $popover-header-padding-x;
@@ -156,7 +144,7 @@
@include font-size($font-size-base);
color: $popover-header-color;
background-color: $popover-header-bg;
- border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
+ border-bottom: $popover-border-width solid $popover-border-color;
@include border-top-radius($popover-inner-border-radius);
&:empty {