diff options
Diffstat (limited to 'vendor/twbs/bootstrap/scss/_popover.scss')
-rw-r--r-- | vendor/twbs/bootstrap/scss/_popover.scss | 60 |
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 { |